一招让height百分比生效,解决你多年的困扰

前端开发人员可能都遇到这种情况,有时候我们想把div的高度像设置宽度一样设置成占网页的百分之多少,却发现高度百分比并不起效。

比如我们想让一个div的宽度为50%,高度为50%,很自然的写出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div style="width:50%;height:50%;background:#0f0;">
想让这个div宽度为50%,高度为50%。
</div>
</body>
</html>

可结果发现宽度为50%,高度却不起作用。

paste image

查阅很多资料后,终于找到了解决办法。问题就在于浏览器计算高度和宽度的方式不同:

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

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

上面的演示例子是父元素没有设定固定高度,于是子元素的高度height: 50% 也不会起作用。解决办法就是给html和body加上height: 100%。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="width:50%;height:50%;background:#0f0;">
想让这个div宽度为50%,高度为50%。
</div>
</body>
</html>

运行结果如下,得到我们想要的结果。

paste image

总结:高度百分比只有在父元素高度固定的情况下生效,利用宽高百分比,实现响应式布局。另外如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。

竹风原创,转载请注明出处,谢谢!

最后更新:

原始链接: http://wangzc.cc/blog/skills-height-100/