以百分比表示的最小高度属性不起作用[重复]答案

【问题标题】：Min-height property in percents doesn't work [duplicate]以百分比表示的最小高度属性不起作用[重复]
【发布时间】：2013-06-19 16:52:47
【问题描述】：

这是文档的基本外观：

<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 的父级是 body。我不明白这里有什么问题。当我使用 Chrome 开发工具检查高度时，此页面上的正文高度为 360 像素，当然，这比应有的低两倍。

为什么？

UPD：fiddle

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

【问题讨论】：

有什么理由拒绝投票？
如果你为这个问题制作了一个 jsFiddle 会有所帮助：jsfiddle.net
这是一个非常令人困惑的问题。
请以jsfiddle.net为例。这将非常有帮助。
@RiccardoPasianotto，你是什么意思混淆？有什么提示可以改进这个问题吗？

标签： html css

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，但如果内容实际上超过 100% 高度？
主体默认为 100% w/h。我认为没有理由在 css 中使用它。
谢谢，我投了赞成票，但整个问题是将 body 和 html 设置为 100%，并将 #content_holder 的最小高度设置为 100%
刚刚找到这个并设置body html { height:100%; } 成功了。