CSS布局-高度自适应

2017年02月05日Web前端0

前面一篇讲述了有关高度自适应的问题，现在来讨论下用CSS2来实现高度自适应的方式。

单个自适应

当且只有个一个div的高度需要自适应时，我们可以使用以下方法，

*{padding:0;margin:0;}
.title{height:100px;background-color:red;}
.content{position:absolute;top:100px;bottom:0px;left:0px;right:0px;background-color:olive;}
<body>
  <div class="title"></div>
  <div class="content"></div>
</body>

2017-02-03_190604

我们调整浏览器窗口的大小，第二个div可以达到自适应的效果。当然，这种方式只可以兼容IE7+以上的浏览器。

多个自适应

我们可以采取高度百分比的方式来实现。注：设置元素height百分比式，必须设置其所有父级的height。

*{padding:0;margin:0;}
body,html{height:100%;} /* 这个设置是必须的 */
.first{height:20%;background-color:red;}
.last{height:80%;background-color:olive;}
<body>
    <div class="first"></div>
    <div class="last"></div>
</body>

更改窗口大小，上下两个div的高度遵循20:80的关系，也就是1:4的关系，调整height比例，就可以更改两者的相对高度。

当然，可以通过这两种方式的组合，来达到其他自适应的目的。

CSS

目录