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:
<div style="height: 50px">
<div id="innerDiv" style="height: 100%">
#innerDiv is going to have
<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
#innerDiv is going to have
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
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 =
By default, the element's
height is always set to
auto unless and until you specify the
% or any other unit.
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
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
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
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.
More info about position/dimension:
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:
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 (
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