我有一个奇怪的CSS问题:我的页面内容100%填充了页面高度

Question

首先，我将最外层对象的高度html设置为100%。然后，我将主体的min-height设置为100%。该页面有两个容器：header和article。收割台高度为90px。article是calc(100% - 90px)。

我在文章容器中添加了一些内容，因为没有它就无法显示。

我读过一篇文章，谈到为calc添加供应商前缀，所以-moz-calc，-webkit-calc。这不起作用。article只是为了包装其内容而进行扩展。如果运行代码，您会注意到article容器没有扩展到页面底部。

我检查了caniuse.com，发现大多数浏览器都支持calc()。我确实发现，如果我在px中指定height，它会正确扩展，但由于该站点支持移动，我不知道每个设备的高度。

我确实注意到，将100%更改为100vh，article现在扩展到页面底部。我相信，对于height 100%，article扩展到父对象的高度，在这种情况下，父对象是body标签。由于CCD_ 24是CCD_。我被难住了。我在iPad上测试了这个，它运行正常。在Galaxy S5上，它没有100%扩展。也许手机不支持vh，因为它有点旧。我通过Chrome对手机和电脑进行了远程调试，发现Chrome浏览器喜欢–webkit-calc()。奇怪的是，当手机处于人像模式时，它的计算100vh是屏幕高度的一半。

这是我的代码，格式尽可能简单：

html {
height: 100%;
background-color: yellow;
padding: 0;
margin: 0;
}
body {
min-height: 100%;
background-color: #acacac;
padding: 0;
margin: 0;
}
header {
height: 90px;
background-color: red;
width: 85%;
margin: 0 auto;
}
article {
min-height: -moz-calc(100vh - 90px) !important;
min-height: -webkit-calc(100vh - 90px) !important;
min-height: calc(100vh - 90px) !important;
background-color: white;
width: 85%;
margin: 0 auto;
}

<header></header>
<article>
<br />
<div style="background-color:green; width:50%; height:200px; margin:0 auto">bbb</div>
<br />
</article>

Answer 1

height 100%仅在存在具有位置和固定高度的父元素时有效。如果没有，则需要使用100vh(视口高度)。请记住，100vh并不代表某些触摸设备(ipad)上的全屏，因为在计算中不尊重某些工具栏。

Answer 2

height:100%不会为您提供视口高度的100%，只提供页面内容(或父元素)的高度。height:100vh(视区高度)似乎适用于大多数浏览器，对吧？所以，也许它正在弄清楚为什么它在某些设备上不能正常工作？这篇文章可能会有所帮助。https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css

(需要更多信息来弄清楚为什么它在你手机上的视口高度下没有像预期的那样表现。)