扩大身高css

时间:2018-07-18 16:04:29

标签: html css

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

我找到了一个解决方案(如下),该解决方案通过指定全视图端口的最小高度实现了相同的结果,并且可以在不同的浏览器上使用。我可以用它作为替代解决方案吗?如果有,此解决方案的缺点是什么?请提供一些佐证。

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

1 个答案:

答案 0 :(得分:1)

@Josethehose提供了一条评论,将我引向有关我的问题的有用信息。参见min-height in vh vs % for body?

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

说明: html和body标签没有默认高度,可以相对于其父元素调整大小。 层次结构为“视口”>“ HTML”>“正文” 。浏览器屏幕的实际大小是视口,因此为html标签指定android:inputType="number|numberDecimal" android:inputType="numberDecimal" android:inputType="number" android:digits="0123456789.," 将确保它是其父元素或视口的完整高度。 height: 100%可以与body标签结合使用,以实现从视口继承的父元素或html标签的完整高度。

最佳解决方案是:

height: 100%