Min-height property in percents doesn't work

Question

This is how basically document looks like:

<body>
<div id="content_holder">
<div class='all_links'>
</div>
  <div class="item">
        <div class="notice"></div>
    </div>
</div>
<div id="bottom_nav">
</div>
</body>

And CSS:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    }

body{
overflow-y:scroll;
min-width: 1024px;
}

#content_holder{
    min-height: 100%;
}

.item {
width: 800px;
position: relative;
top: 100px;
left: 50%;
margin-left: -400px;
text-align: center;
min-height: 100%;

}

The problem that on this specific page html, body, .item properties about min-height doesn't work in percents.

On other pages everything is OK. Parent of .item is body. I can't get what is wrong here. When I check height with Chrome Dev Tool, body height on this page is 360px, which, of course, twice less than it shoudl be.

Why?

UPD: fiddle

What I've found out, that height property doesn't work specifically for #content_holder, and works for body

It would help if you made a jsFiddle for this problem: http://jsfiddle.net/ — Chris Mukherjee, Jun 22 '13 at 18:55
Please make an example on http://jsfiddle.net. That would be very very helpful. — Chris Mukherjee, Jun 22 '13 at 19:09
@RiccardoPasianotto, what do you mean confusing? Any hints how I can improve this question? — Joe Half Face, Jun 22 '13 at 19:09

Ian Campbell · Answer 1 · 2013-06-22T19:31:53.440

When height is set on any element in a percentage, it's immediate parent element must have height specified (not as a percentage, but in px or em).

The weird exception to that rule is the <html> element, which if it is given height: 100%, an immediate child element can then have height as a percentage (i.e. the <body> element).

As for setting min-height: 100%, this sets the initial size to 100% height and allows the element to exceed that height.

I'm pretty sure that min-height also follows the same above-mentioned rule for height -- for any element set with min-height in a percentage, its' immediate parent element must have height specified (not as a percentage), with the exception of the <html> element being set with height as a percentage.

However, if an element sets height as a px or em value, and its' immediate child element sets height as a percentage, the grandchild element's height can be set as a percentage, and so on...

Chris Mukherjee · Answer 2 · 2013-06-22T19:14:07.363

1

Just change min-height: 100% to height: 100%.

The height of your webpage will be 100% of the browser screen, or 100% of the content height, whichever is bigger.

edited Jun 22 '13 at 19:14

answered Jun 22 '13 at 19:01

Chris Mukherjee

841
9
25

yes, but if content is actually more than 100% height? – Joe Half Face Jun 22 '13 at 19:08
Body is 100% w/h by default. I see no reason having this in css. – Nikola R. Jun 22 '13 at 19:17
1

Thanks, I upvoted, but whole issue was to set body and html to 100%, and min-height of #content_holder to 100% – Joe Half Face Jun 22 '13 at 19:34
Just found this and setting `body html { height:100%; }` did the trick. – Frank Feb 24 '16 at 21:47

Min-height property in percents doesn't work

2 Answers2

Linked