I was asked a question in an interview that "what is the difference between the css height:100% and height:auto?"
Can any one explain?
This question is related to
css
height: 100% gives the element 100% height of its parent container.
height: auto means the element height will depend upon the height of its children.
Consider these examples:
height: 100%
<div style="height: 50px">
<div id="innerDiv" style="height: 100%">
</div>
</div>
#innerDiv is going to have height: 50px
height: auto
<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
</div>
</div>
</div>
#innerDiv is going to have height: 10px
The default is height: auto in browser, but height: X% Defines the height in percentage of the containing block.
A height of 100% for is, presumably, the height of your browser's inner window, because that is the height of its parent, the page. An auto height will be the minimum height of necessary to contain .
height:100% works if the parent container has a specified height property else, it won't work
Source: Stackoverflow.com