difference between css height : 100% vs height : auto

Css

Css Problem Overview

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?

Css Solutions

Solution 1 - 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

Solution 2 - Css

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 - Css

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

Solution 4 - Css

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

Categories
Recommended Css Solutions

Previous Solution:

Is AngularJS just for single-page applications (SPAs)?

Javascriptnode.jsAngularjs

Next Solution:

How to suppress warnings globally in an R Script

RWarnings

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGowsikanView Question on Stackoverflow
Solution 1 - CssManish MishraView Answer on Stackoverflow
Solution 2 - CssRohit Azad MalikView Answer on Stackoverflow
Solution 3 - CssChukwuemekaView Answer on Stackoverflow
Solution 4 - CssVahid HeydarinezhadView Answer on Stackoverflow