Question

基本上这就是文档的样子：

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

和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%;

}

关于最小高度的此特定页面html, body, .item属性的问题在百分比中不起作用。

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

为什么？

UPD ：fiddle

我发现，高度属性不适用于#content_holder，适用于身体

Answer 1

如果在百分比中的任何元素上设置了height，那么它的直接父元素必须指定height（不是百分比，而是px或em）。

该规则的奇怪例外是<html>元素，如果给定height: 100%，则直接子元素可以以height作为百分比（即<body>元素）。

至于设置min-height: 100%，这会将初始大小设置为100％高度，并允许元素超过该高度。

我很确定min-height也遵循上述height规则 - 对于任何以min-height为单位的元素集，其'直接父元素必须height 1}}指定（不是百分比），但<html>元素以height为百分比设置除外。

但是，如果元素将height设置为px或em值，并且其'immediate子元素将height设置为百分比，则孙元素的height可以设置为百分比，依此类推......

Answer 2

只需将min-height: 100%更改为height: 100%。

网页的高度为浏览器屏幕的100％，或内容高度的100％，以较大者为准。

百分比的最小高度属性不起作用

2 个答案: