Geek Answers Handbook

Why is container height inherited when it has min-height size?

I am trying to make the container fill the entire page (or view, whichever is greater), but run into some problems. I am using the recommendations from this post: https://stackoverflow.com/a/166268/2128 to set the values ​​of <html> and <body> to 100%.

But I noticed that the .Content div only fills the viewport when the <body> height: 100% set with height: 100% , but not with min-height: 100% . Why is this? Why .Content n't .Content raise the height of the <body> if it is set using min-height ? Is there a fix for this (without absolute positioning or fixed heights)?

HTML

 <html> <body> <div class="Content">Content</div> </body> </html>

CSS

 * { margin: 0; padding: 0; } html { height: 100%; } body { /* does not work for .Content: */ min-height: 100%; /* does work for .Content: */ /* height: 100%; */ background: blue; } .Content { background: red; min-height: 100%; }

codepen: http://codepen.io/anon/pen/mJEMVX

Ps: When the height <body> set using height: 100% , both min-height: 100% and height: 100% work as expected for .Content .

+5
source share
1 answer

Percentage heights refer to the computed height property of the parent element. See specification . When setting only min-height: 100% in the body element according to my answer to the related question, the height property remains untouched with its default value auto . The min-height does not affect the calculated value of the height property.

Because of this, min-height: 100% on your element does not have a parent height for the link, and therefore it will not work. After you set height: 100% in the body element, your element can refer to this height to calculate its own percentage value.

How to fix this depends on what type of layout you are trying to achieve. The sole purpose of setting min-height: 100% in the body element is to allow it to expand when the height of the content exceeds the content area of ​​the viewport, which results in a scroll bar. If your content is only the height of the viewport, or you do not want the body create scrollbars, it is as simple as replacing min-height: 100% with height: 100% with body .

+6
source

More articles: