CSS 高度100%自适应

所属:CSS

在做移动端 WEB 页面时,遇到了个问题,给 div 设置了 height:100%;
目的是想让它铺满全屏的,先来看看 DEMO1 效果,但发现实际显示效果却不是我们想像的那样。

1
2
3
4
5
6
7
8
9
<style>
.demo {
height:100%;
background-color:red;
}
</style>
<div class="demo">测试高度为100%是否生效...</div>
`

后来经过测试后发现,跟它父级关。
现在先来看看 DEMO2 的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
body {
margin:0;
}
html,body {
height:100%;
}
.demo {
height:100%;
background-color:red;
}
</style>
<div class="demo">测试高度为100%是否生效...</div>

DEMO 里可以看到 div 的父级是 body 元素,而 div 的高度是否可以使用百分比来显示,取决于它的父元素。
浏览器渲染时 body 默认是没有设置高度的,所以即便我们在 DEMO1 里给 div 设置了 height:100%; 也不铺满全屏的。
因此,在 DEMO2html/body 标签加上 height:100%; 后,那才是我们要效果。

参考资料