css - 我有一个奇怪的 CSS 问题 : the contents of my page are filling the page height 100%

Question

首先，我将最外层对象 html 的高度设置为 100%。然后，我将正文的 min-height 设置为 100%。该页面有 2 个容器:header 和 article。 header 的高度为 90px。 文章是calc(100% - 90px)。

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

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

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

我确实注意到，将 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

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