对于标准架构div+css的推广中,不少朋友都遇到过高度自适应的问题,网上的方法也有很多,网上有朋友总结了“解决列高度自适应(列高度相同)的五种方法”,由于最近做项目时候遇到一个类似的问题,所以打算再做一次深入的探讨,以下的讨论都要求结果必须要在IE和Firefox下浏览效果相同。

      首先说明第一种情况:



      上图中,要求容器一的高度为固定值L1,容器二在容器一内,不过容器二的内容高度L2不固定,要求L2大于L1的时候容器一能自适应二的高度;大家可以尝试只看上图写出符合标准的页面代码试一试。

      将第一种情况再稍微负责一点,说明第二种情况:



      上图中,其它的条件要求和第一种情况完全一致,只不过这次在容器二中出现带有float的容器三、容器四,大家知道在层中出现float的时候会导致一些高度的问题,臭名昭著的IE6 Peekaboo/Guillotine Bug也和float关,第一种方法在出现float嵌套的时候已经不好用了,这时候怎么办呢,大家再可以尝试只看上图写出符合标准的页面代码试一试。

      总结说明:
      针对第一种情况,在容器一中css部分加入的关键代码为:
height: auto !important;
min-height:80px!important;/* 初始高度必须为一个固定高度 */
height:80px;

      针对第二种情况,在上面的修改基础上还要在容器二中补充css:
overflow: hidden;

      这个是触发Firefox对高度的自适应的,如果在容器二的高度也固定,并且要求容器二对容器三、容器四的高度要自适应的话,那上面的代码就要补充为:
overflow: hidden !important;
overflow: visible;

      最终展示页面:test1.htm | test2.htm
      个中的调节测试大家可以不断的修改css参数来感受每一个设置的作用。
My life | 评论(0) | 引用(0) | 阅读(1253)
收藏到:
雅虎收藏夹
百度收藏
书签
新浪ViVi
搜狐网摘
365Key网摘
天极网摘
和讯网摘
网摘
网络书签
博拉网
天下图摘
发表评论
表情
emotemotemotemot
emotemotemotemot
emotemotemotemot
emotemotemotemot
emotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写