CSS高度自适应

网上有相关的文章,但是都没有说思想。之前只是有这个认识,但是没有亲自写过类似的东西,这回做了一个这样类似的东西。发现一个道理就是:只看不做,终无成也。

经过自己的尝试,发现需要两个前提:

1、高度自适应的这个元素,假设为A,它必须要有一个或多个它的兄弟元素(节点),假设为B;

2、Height(B) > Height(A)。

如果不符合上面的条件的话就没必要做自适应了。

需要做的有两点:

1、对A的父级元素(节点),假设为C,设置:overflow-y: hidden; //隐藏掉有可能超出的部分

2、对A元素设置:margin-bottom: -2000px; padding-bottom: 2000px; //可以看出按照盒模式的计算方式,就刚好相互抵消了。

这样就可以看出效果了。

不过我发现了一个问题:

1、IE6下,我采用的是margin-left:-100%进行布局,发现使用这个属性后,定位错误,跑出了屏幕。修正为:_margin-left: -xxxpx; //xxx为主内容的宽度

具体的参考:http://www.positioniseverything.net/articles/onetruelayout/equalheight 或google:css自适应高度

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值