Height: 100% VS Height:auto

Question

I am trying to understand the following

Height: auto; What does this do?
Height: 100%; What does this do?
What is the difference betweem 1 and 2 ? Any examples to explain the difference ?

Thanks in advance!

This question should be closed. "General Reference" – vallentin Oct 18 '13 at 05:30 — vallentin, Oct 18 '13 at 05:30

Mr. Alien · Accepted Answer · 2013-10-18T05:37:19.283

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.

score 2 · Answer 2 · edited May 23 '17 at 12:09

2

height:100%: implies the element is going to have the 100% height of its parent container.
height:auto: means, the element will have flexible height i.e. its height will depend upon the height of children elements of it
Click here for difference with code

edited May 23 '17 at 12:09

Community

1
1

answered Oct 18 '13 at 05:29

Ramesh Rajendran

37,412
45
153
234

As an example, if I were to add `margin:5px` to a div with `height:100px`, it would stretch out of its bounds and do 105px. With `height:auto`, it would take the 5px of margin out of the height instead, keeping it at 100px. – Scott Rowell Oct 18 '13 at 05:34

score 0 · Answer 3 · answered Oct 18 '13 at 05:50

reference:http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Content height: the 'height' property

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

auto

The height depends on the values of other properties. See the prose below. Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. However, it may be that the height is not known until elements that come later in the document have been processed.

Negative values for 'height' are illegal.

For example, the following rule sets the content height of paragraphs to 100 pixels:

p { height: 100px }

Paragraphs of which the height of the contents exceeds 100 pixels will overflow according to the 'overflow' property.

Height: 100% VS Height:auto

3 Answers3