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?
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> <div> </div> </div> #innerDiv is going to have height: 50px
height: auto
<div> <div> <div> </div> </div> </div> #innerDiv is going to have height: 10px
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
The default is height: auto in browser, but height: X% Defines the height in percentage of the containing block.
