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?
Add a comment
|
4 Answers
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
4 Comments
BornToCode
I think that in the case of 'height:auto #innerDiv will be
10px + the size it needs for its own content - see this jsfiddle
John Strood
@Manish Mishra: What is the best responsive design? Setting the height of the child element or the container element, and letting the other to derive its height ?
niico
I think a good way of thinking about auto is that you are 'unsetting' hight - it's like not having it set.
SherylHohman
I modified the fiddle that BornToCode shared above, to make it more obvious that
auto causes the element to grow to accomodate BOTH its content, AND its child's content. In contrast a Fixed height value does not grow (or show) content that cannot fit within the declared height.jsfiddle.net/m3f8y6xr/1 This Answer, I believe, is not sufficiently worded to make it ovbious that the element will grow to include all content, whether it is its own text, or a child's content. Of course it can be argued that its own text is also a child. This provides visual confirmation of the behavior.height:100% works if the parent container has a specified height property else, it won't work
1 Comment
Nora McDougall-Collins
It doesn't seem to work if the parent container has height: auto
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 .
1 Comment
goonerify
This isn't necessarily correct if the parent element is one with a defined height that doesn't fit to the size of the browser's window
The default is height: auto in browser, but height: X% Defines the height in percentage of the containing block.
