CSS布局自适应高度解决方法

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加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

 如果您对本文有任何疑问或者建议，请到讨论区发表您的意见: >> 论坛入口 <<

上一页12 下一页

上一篇：CSS中的滑动门技术研究   下一篇：用tabIndex轻松实现网页导航

【文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论】