css 左右布局高度自适应,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;}

c65e1d60cc5382e443e15f187e645055.png

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

多个自适应

我们可以采取高度百分比的方式来实现。注:设置元素height百分比式,必须设置其所有父级的height。*{padding:0;margin:0;}

body,html{height:100%;} /* 这个设置是必须的 */

.first{height:20%;background-color:red;}

.last{height:80%;background-color:olive;}

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

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

总结

以上是编程之家为你收集整理的CSS布局-高度自适应全部内容,希望文章能够帮你解决CSS布局-高度自适应所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值