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%; 也不铺满全屏的。
因此，在 DEMO2 给 html/body 标签加上 height:100%; 后，那才是我们要效果。

参考资料