为啥 100% 不等于 100% 高度？
Posted
技术标签:
【中文标题】为啥 100% 不等于 100% 高度？【英文标题】：Why does 100% not mean 100% height?为什么 100% 不等于 100% 高度？ 【发布时间】：2011-12-14 09:17:49 【问题描述】：我正在尝试让一些 divss 扩展以填满屏幕，但我很挣扎。我已经在this jsfiddle 上分解了这个问题。
我真正想知道的是，为什么 div 及其 100% min-height 在其父级具有相同属性并扩展时不会扩展到那个高度（或根本没有）？
<body>
<div>
stuff
</div>
</body>
body
min-height: 100%;
background: red;
div
min-height: 100%;
background: grey;
【问题讨论】：
因为你不能真正在静态元素上使用 100% 的高度。将位置属性从静态更改为绝对将为您提供 100% 的高度。 jsfiddle.net/qggFz 这是正确的答案，您应该将答案作为答案提交，以便我们选择它们。 :D html 和 CSS 中与高度无关的东西就是你认为的意思。 【参考方案1】：这会起作用
body, html
height: 100vh;
aside
background: green;
width: 200px;
height: 100vh;
【讨论】：
【参考方案2】：CSS 2.1 spec 中涵盖了该问题：
指定百分比高度。百分比是 根据生成框的高度计算 包含块。如果包含块的高度不是 明确指定（即，它取决于内容高度），并且这个 元素不是绝对定位的，该值计算为“自动”。一种 根元素上的百分比高度是相对于初始的 包含块。注意：对于绝对定位的元素 包含块基于块级元素，百分比为 相对于该填充框的高度计算 元素。这是从 CSS1 的一个变化，其中百分比总是 相对于父元素的内容框计算。
因此，澄清一下，百分比高度将引用其包含块的高度（除非它是 position: absolute 或 position: fixed）。如果包含块没有指定高度，那么百分比将引用auto，它不会真正做太多。
position: absolute 将引用的包含块更改为最近定位的（absolute、relative 或 fixed）元素。
position: fixed 将引用的包含块更改为视口。
因此，如果您在包含块上指定高度，在包含块上指定静态以外的位置，或者不介意将视口用作包含块，那么您可以有效地使用百分比高度。
请看我的demonstration at jsFiddle
【讨论】：
"如果包含块没有指定的高度..." - 你的意思是它必须明确指定吗？如果一个块由于其子元素而具有高度，但没有明确的高度怎么办。【参考方案3】：因为您不能真正在静态元素上使用 100% 高度。将位置属性从静态更改为绝对将为您提供 100% 的高度。 demo
根据 PO 的要求发布为答案。
【讨论】：
【参考方案4】：有两个问题，您还需要指定 html 的高度，如：
html, body
min-height: 100%;
在 IE 中似乎也存在一个问题，即 min-height 对 div 不起作用，但在 div 上指定高度却能起作用。因此：
html, body
min-height: 100%;
background: red;
div
height: 100%;
background: grey;
【讨论】：
当页面嵌入 iframe 时，min-height: 100% 是不够的。见jsfiddle.net/greggman/jbmaded2【参考方案5】：
CSS 中的百分比高度对我来说没有多大意义。我会争辩说它没有按应有的方式工作，但 CSS 爱好者会坚持认为它确实如此。
本文详细讨论了问题和解决方案：
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
这也可能有帮助：
<style>
#outer position:absolute; height:auto; width:200px; border: 1px solid red;
#inner position:absolute; height:100%; width:20px; border:1px solid black;
</style>
<div id="outer">
<div id="inner"></div>
text
</div>
有关上述内容的更多详细信息，请参见此处：How to make a floated div 100% height of its parent?
【讨论】：
嗯，也许我误解了你的帖子，但它与原始问题有什么关系？他只有一列，没有浮动 div。如果百分比是相对于视口的，那么百分比高度就很有意义。 这并不意味着特定于浮动 div，而是在容器的 100% 高度显示 div。在这种情况下，文档正文将是容器。【参考方案6】：您还需要设置html 的高度，以便100% 指的是视口高度而不是文档高度（demo）：
html,body
height: 100%;
background: red;
padding: 0;
div
height: 100%;
background: grey;
【讨论】：
我可以看到它在 jsfiddle 中工作，但在我网站的其他部分实施时却没有。嗯…… @MildFuzz 你能发布一个指向你网站的链接吗？ 它目前没有上线（并且有充分的理由！）。另外，我已经使用绝对定位修复了它，这对我的要求来说很好（事实上，现在我想它，必不可少！！） @MildFuzz 好吧，恐怕我真的帮不了你。您是否尝试过尽可能简化代码，并检查 CSS 属性是否符合您的预期（使用浏览器的开发人员工具）？ 就像我说的，它现在可以工作了，所以我不会再深入了。我已经为你的努力投了赞成票，但我想给引导我走上正确道路的评论者有机会提出问题，以便我可以勾选它。谢谢：D以上是关于为啥 100% 不等于 100% 高度？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery mobile 100% 高度页面，等于可见区域