difference between css height : 100% vs height : auto

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?

Solution 1:

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

Solution 2:

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 .

Solution 3:

height:100% works if the parent container has a specified height property else, it won't work

Solution 4:

The default is height: auto in browser, but height: X% Defines the height in percentage of the containing block.