CSS布局自适应高度解决方法
作者：forestgan 时间：2014-07-27 12:47:30
原作者:Alex Robinson
原文标题:Equal Height Columns
这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加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通过。
最终效果:
运行代码框
[Ctrl+A 全部选择]
原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight
0
投稿猜你喜欢
用ASP判断客户端浏览器语言自动跳转
Data URI 和 MHTML
ASP获取远程文件大小信息(通过header头信息)
微信小程序 数据缓存实现方法详解
Python修改Excel数据的实例代码
Python制作当年第一款手机游戏-贪吃蛇游戏（练习）
简单了解Django应用app及分布式路由
python如何将文件a.txt的内容复制到b.txt中
Python数字/字符串补零操作实例代码
mysql数据库重命名语句分享
简单了解Python write writelines区别
python使用自定义user-agent抓取网页的方法
Python urllib库如何添加headers过程解析
ie8下ewebeditor无效的解决办法
js仿腾讯QQ的web登陆界面
Asp函数介紹(37个常用函数)
ASP中遍历和操作Application对象的集合
Mysql中SQL语句不使用索引的情况
