CSS布局-高度自适应

前面一篇讲述了有关高度自适应的问题,现在来讨论下用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比例,就可以更改两者的相对高度。

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

发表评论

电子邮件地址不会被公开。

*