3

这就是文档的基本外观：

<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有关 min-height 的属性的问题不适用于百分比。

在其他页面上一切正常。的父母.item是身体。我不明白这里有什么问题。当我使用 Chrome 开发工具检查高度时，此页面上的正文高度为 360 像素，当然，这比应有的低两倍。

为什么？

UPD：小提琴

我发现， height 属性不适用于#content_holder，并且适用于 body

4

2 回答 2

2


当height以百分比设置在任何元素上时，必须height指定它的直接父元素（不是百分比，而是在pxor中em）。

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

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

我很确定这min-height也遵循上述相同的规则height——对于任何min-height以百分比设置的元素，它的直接父元素必须已经height指定（不是百分比），除了<html>元素被设置height为百分比。

但是，如果一个元素设置height为px或em值，并且其直接子元素设置height为百分比，则孙元素height可以设置为百分比，依此类推...

于 2013-06-22T19:22:50.057 回答
1

只需更改min-height: 100%为height: 100%.

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

于 2013-06-22T19:01:45.823 回答