html - 展开高度CSS

Question

我正在尝试将我的 body 标记扩展到整个浏览器高度以完全显示背景颜色。我知道有一些解决方案建议使用 100% 的 html 标签高度和 100% 高度的 body 标签或 100% 的最小高度。

我找到了一个解决方案(如下)，它通过指定完整视口(viewport)的最小高度实现了相同的结果，并且适用于不同的浏览器。我可以将其用作替代解决方案吗？如果有的话，这个解决方案的缺点是什么？请提供一些支持证据。

body {
background-color:#ea7400;
height: 100%;
min-height: 100vh;
}

Answer 1

@Josethehose 提供了一条评论，指导我获取有关我的问题的有用信息。参见 min-height in vh vs % for body?

虽然我的解决方案确实有效，但我认为它不是最佳解决方案，因为它使用了不必要的代码。

解释: html 和 body 标签没有默认高度，可以相对于它们的父元素调整大小。 层次结构是 Viewport > HTML > Body。浏览器屏幕的实际大小是视口(viewport)，因此为 html 标记指定 height: 100% 将确保它是其父元素或视口(viewport)的完整高度。 height: 100%可以和body标签结合实现父元素的全高或者继承自Viewport的html标签。

最佳解决方案是:

 html,
 body {
 height: 100%;
 }