| CSS布局自适应高度解决方法 |
| [ 来源：ITWENKU 时间：2007-4-11 10:43:52 | 浏览：231人次
] |
| |
|
这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
先看代码：
#wrap{
overflow: hidden;
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
实现原理：
块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom（足够大的值）到列的块元素 。
应用margin-bottom（足够大的值）到列的块元素。
padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。
兼容各浏览器
IE Mac 5
得到高度正确，所以要过滤掉上面的代码。
/**/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/
Opera
1. Opera7.0-7.2不能正确清除溢出部分，所以要加：
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/**/
#wrap
{
display: block;
}
/* end easy clearing */
/**/
2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：
/**/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
3.Opera9的B2在修正8的bug.
测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过
转http://www.phpfans.net/article/html/e1171770261_14710.html
学习
学习
顶 77分？ 呵呵
没有页面御览哦
有收获！
谢谢楼主，楼主是个好心人啊！
学习
学习
http://www.w3cn.org中有更多关于DIV布局的资料
不错,帮顶.
I meet the same problem
thank you
这种方式不行。IE7，Firefox2都不能正确显示。
会出现这种情况:
关于CSS定位到锚点的问题，竟然锚点以上的内容不显示了！超郁闷！
http://community.csdn.net/Expert/TopicView3.asp?id=5553734
范例显示地址：
http://cn.hoopower.com/blog/20070505/pixiu.html
http://cn.hoopower.com/blog/20070505/pixiu.html#comments
考虑还是JS比较稳定！
span＋div行列布局可以使效果更好，代码更简单
没有考虑兼容性?
这种东东百度一堆!就没有别的方案了么?等待和学习中...
|
|
 |
推荐文章 |
|
