我有一个奇怪的CSS问题：我的页面内容填充页面高度100％

Question

首先，我将最外层物体html的高度设置为100%。然后我将身体的min-height设置为100%。该页面有2个容器：header和article。标题是90px的高度。 article是calc(100% - 90px)。

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

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

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

我注意到将100%更改为100vh article现在扩展到页面的底部。我相信，使用height 100%，article延伸到父对象的高度，在这种情况下是body标记。由于body是100%。我很难过。我在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

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

Answer 2

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

（需要更多信息来确定为什么手机上的视口高度没有达到预期的效果。）