百分比的最小高度属性不起作用[重复]

This question already has an answer here:

这个问题在这里已有答案:

Make body have 100% of the browser height 21 answers

让身体拥有100%的浏览器高度21个答案

Why doesn't HTML and BODY take all available height of document when min-height: 100%? [duplicate] 2 answers

当min-height:100%时,为什么HTML和BODY不占用文档的所有可用高度? [重复] 2个答案

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.

在这个特定的页面html,body,.item属性关于min-height的问题在百分比中不起作用。

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.

在其他页面上一切正常。 .item的父母是身体。我不知道这里有什么问题。当我使用Chrome Dev Tool检查高度时,此页面上的身高是360px,当然,这比它的两倍要小。

Why?

UPD: fiddle

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

我发现,高度属性不适用于#content_holder,适用于body

2 个解决方案

#1

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

只需更改最小高度:100%到高度:100%。

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

您网页的高度将是浏览器屏幕的100%,或内容高度的100%,以较大者为准。

#2

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

当在百分比中的任何元素上设置高度时,它的直接父元素必须指定高度(不是百分比,而是在px或em中)。该规则的奇怪例外是元素,如果给定高度:100%,则直接子元素可以具有高度百分比(即元素)。至于设置最小高度:100%,这会将初始大小设置为100%高度,并允许元素超过该高度。我很确定min-height也遵循上面提到的相同高度规则 - 对于任何具有min-height百分比的元素集,它的'直接父元素必须指定高度(不是百分比),以高度为百分比设置元素的例外情况。但是,如果元素将height设置为px或em值,并且其'immediate子元素将height设置为百分比,则可以将孙元素的高度设置为百分比,依此类推......

#1