html - 全视口高度部分的完全兼容和语义方法

Question

我正在寻找构建 min-height: 100% 部分，似乎普遍的共识是：

html{
  height: 100%;
}
body {
  min-height: 100%;
}

直接孩子也有 min-height: 100% 。我无法解决的问题是，如果 HTML 具有 100% 的固定高度，而 body 可以被允许增长，它是不是从页面中射出并且文档不是很语义化，即 html < body。此外，如果您的部分包含在其他几个 div 中，则所有父母都需要 min-height: 100% 。这似乎有点不合常规。

最优雅的方法是什么？我知道 height:100vh 如果所有浏览器都支持它是最好的方法。使用javascript获取视口并设置所有感兴趣部分的高度属性会更好吗？

Answer 1

The "unconventional" issue is actually very true and conventional. You see, browsers only calculate "horizontal" layout, not vertical unless explicitly set. So if you want an item to have a height of 100%, then you'll need to set some height explicitly to all it's ancestors so that the browser can calculate the dimensions.