Difference Between CSS Height: 100% VS Height: Auto

difference between css height : 100% vs height : auto

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

Height: 100% VS Height:auto

height: auto; means, the height of the element will increase according to the content it holds, if you assign fixed height, the content overflows, so when you don't know that that your element will contain how much, you set it to auto, so the height will auto increase.

When you set height: 100%; so it will take entire vertical space of the container element, so say for example, when the container element is 200px in height, and you use height: 100%; on the child element, it will be height: 100%; of the container element = 200px.

By default, the element's height is always set to auto unless and until you specify the height using px % or any other unit.

Demo (height: auto;) Keep adding content and your element will expand vertically.

Demo 2 (height: 100%;), this will behave just like you are setting some fixed height to your element, if the content increases, it will overflow. This method only comes handy where you want your child element to take 100% vertical space of the parent container.

height:100% VS min-height:100%

Here's an explanation from the W3C (link):

The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:

The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.

If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.

If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.

For the specific case you give, specifying height:100% makes the height of the element equal to the height of the containing block. (However this could potentially be overruled, for instance if you also specified max-height:50%.) Specifying min-height:100% means that if the computed height is less than 100%, in fact even if you explicitly specified a height less than 100%, it is treated as if you said height:100%. Note that one key difference is that max-height can overrule height but cannot overrule min-height (because max-height is considered after height but before min-height according to the W3C recommendation as quoted above).

CSS height: 100% vs height: inherit

height: 100% will match the height of the element's parent, regardless of the parent's height value.

height: inherit will, as the name implies, inherit the value from it's parent. If the parent's value is height: 50%, then the child will also be 50% of the height of it's parent. If the parent's size is defined in absolute values (e.g. height: 50px), then height: inherit and height: 100% will have the same behaviour for the child.

Styling HTML and BODY selector to height: 100%; vs using 100vh

height: 100vh = 100% of the viewport height

height: 100% = 100% of the parent's element height

That is why you need to add height: 100% on html and body, as they don't have a size by default

Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.

Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw); (for example)

See a nice page here for CSS units : http://css-tricks.com/the-lengths-of-css/

CSS: height:100% vs bottom:0

The height of the child element is determined differently for each property:

bottom: 0 =>
child_height = parent_height - child_margin - child_border

height: 100%=>
child_height = parent_height

In other words height: 100% set the inner height of the child to the same height of its parent, while bottom: 0 sets the outer height of the child to the same height of its parent.

example: http://jsfiddle.net/2N4QJ/1/

More info about position/dimension:
http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx

why in this code Height: auto and Height: 100% on same element

some older browsers like IE6, ignore the !important flag. Thus on IE6 the second height will be obeyed. It's just a way of targeting older browsers.

Why does 100% not mean 100% height?

The issue is covered in the CSS 2.1 spec:

<percentage>

Specifies a percentage height. The percentage is
calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'. A
percentage height on the root element is relative to the initial
containing block. Note: For absolutely positioned elements whose
containing block is based on a block-level element, the percentage is
calculated with respect to the height of the padding box of that
element. This is a change from CSS1, where the percentage was always
calculated with respect to the content box of the parent element.

So, to clarify, a percentage height will reference the height of its containing block (unless it is position: absolute or position: fixed). If that containing block does not have a specified height, then the percentage will refer to auto, and it won't really do much.

position: absolute changes the referenced containing block to the nearest positioned (absolute, relative, or fixed) element.

position: fixed changes the referenced containing block to the viewport.

So, if you specify a height on your containing block, specify a position other than static on your containing block, or don't mind using the viewport as your containing block, then you can use percentage heights effectively.

Please see my demonstration at jsFiddle

---

Related Topics