Equal Height Columns --DIV+CSS布局中自适应高度的解决方法_html/css

Equal Height Columns --DIV+CSS布局中自适应高度的解决方法_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:28:25

原创

1470人浏览过

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

登录后复制

Opera9的B2在修正8的bug.

测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。

最终效果

原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight

请注意:网友momomolo测试时发现,当页面长度到2000px,opera中就出问题了,现在还没有解决的办法.