以百分比表示的最小高度属性不起作用[重复]
Posted
技术标签:
【中文标题】以百分比表示的最小高度属性不起作用[重复]【英文标题】：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，你是什么意思混淆？有什么提示可以改进这个问题吗？ 【参考方案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%; 成功了。以上是关于以百分比表示的最小高度属性不起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章
iOS 13：调整 UITabBar 高度不起作用 [重复]