html - 扩展身高css

Question

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

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

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

标签： htmlcss

Answer 1

@Josethehose 提供了一条评论，指导我获取有关我的问题的有用信息。查看身体的 vh 与 % 的最小高度？

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

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

最佳解决方案是：

 html,
 body {
 height: 100%;
 }