CSS如何指定元素高度为100%

2016-11-25 18:21 Posted in Learn with CSS , HTML

在CSS中，如果你设置一个元素的width为100%，那么它会自动占据全屏宽度，于是你很自然的想到如果给height也设置100%，它就会占据全屏高度。

然而事实是并不会，答案源自于HTML计算元素高度的方法。

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。

考虑如下代码:

<html>
<head>
...
</head>
<body>
 <div class="test">
  ...
 </div>
</body>
</html>

如果想让test占据全屏高度，那么你需要给它所有的父元素指定有效值，也就是body元素和html元素。

如下所示:

html {
 height: 100%
}

body {
 height: 100%
}

这样，代码就能生效了。

2017/1/23更新

有一种更为简单优雅的方式制定元素宽高比，那就是使用vw和vh单位。

以下是w3官方解释: vw Relative to 1% of the width of the viewport; vh Relative to 1% of the height of the viewport

也就是说，如果想让元素填充整个viewport,只需简单地把vh和vw都指定为100%就可以了。大大提高了代码的可维护性。

BlueBreeze

Blog

CSS如何指定元素高度为100%