css实现两列容器等高布局,CSS等高布局的实现方法

等高布局目前最流行的方法就是集“隐藏容器溢出”、“正内补丁”和“负内补丁”于一身的方法，有木有不明觉厉的赶脚？抛开这些乱七八糟的专有名词，其实就是比较常规的布局而已。

方法1：“隐藏容器溢出”+“正内补丁”+“负内补丁”

实现方法

给需要等高布局的元素用padding-bottom来填充，然后用margin-bottom来消除padding-bottom带来的影响，然后给父元素定义overflow:hidden。

实现原理

等高布局实现的原理是用最大高度的元素来撑高其他元素。给父元素定义的overflow:hidden出发了BFC或hasLayout，因此浮动元素的高度也应被计算在父元素中，同时overflow:hidden把超出父元素的部分隐藏；由于父元素的高度被撑到最大高度的子元素的高度，则相对较矮的元素的元素则会用padding-bottom来补偿这部分的高度差。由于背景可以显示在padding中，而且border也跟随padding变化，于是成功完成了一个障眼法。 备注：padding-bottom和margin-bottom应设置得足够大。

代码：

HTML代码：

CSS代码：

.parent {

width: 100%;

overflow: hidden;

]

.left, right {

float: left;

padding-bottom:9999px;

margin-bottom:-9999px;

}

.left {

width: 300px;

height: 300px;

}

.right {

width: 200px;

height: 400px;

}

方法2：使用背景图障眼法

实现原理

实现制作一张带有不同栏背景色的背景图应用于父元素中，定义背景图的repeat-y:repeat，給父容器定义overflow:hidden，使父元素的高度等于其子元素的最大高度，最后由父元素撑开背景图，视觉上好像完成了等高布局。

方法3：用JavaScript代码控制两列等高

实现原理

用JavaScript检测出多列布局中最大高度的一列，然后其他较矮的列的高度均等于最大高度，并且父元素的高度也等于最大高度(只要定义父元素overflow:hidden即可)。

HTML代码：

CSS代码：

.parent {

width: 100%;

overflow: hidden;

]

.left, right {

float: left;

padding-bottom:9999px;

margin-bottom:-9999px;

}

.left {

width: 300px;

height: 300px;

}

.right {

width: 200px;

height: 400px;

}

.middle {

width: 100px;

height: 500px;

}

JavaScript代码：

// 获取等高布局元素组和其父元素

var parent = document.getElementById("parent");

var equalHeightElement = getClassName(parent, oClassName);

// 获取等高元素组的元素的高度值

var elementsHeight = [];

for(var i = 0, len = equalHeightElement.length; i 

elementsHeight[i] = equalHeightElement[i].offsetHeight;

}

// 获取等高元素组中最大高度的元素的高度值

var maxHeight;

for(var i = 0, len = elementsHeight.length; i 

maxHeight = elementsHeight[0];

maxHeight = maxHeight > elementsHeight[i] ? maxHeight : elementsHeight[i];

}

// 给每一个等高元素组的定义高度为最大高度maxHeight

for(var i = 0, len = equalHeightElement.length; i 

equalHeightElement[i].offsetHeight = maxHeight;

}

// 获得obj节点下class属性值为oClassName的子元素集合；

// 参数：obj指父元素；oClassName为元素的class属性值；

function getClassName(obj, oClassName) {

// IE9+及标准浏览器可以直接使用getElementsByClassName()获取className元素集合

if(document.getElementsByClassName) {

return obj.getElementsByClassName(oClassName);

}else {

// classNameArr用来装载class属性值为oClassName的元素；

var classNameArr = [];

// 获取obj的直接子元素

var objChild = obj.children || obj.childNodes;

// 遍历obj元素，获取class属性值为oClassName的元素列表

for(var i = 0; i 

// 判断obj子元素的class属性值中是否含有oClassName

if( hasClassName(objChild[i], oClassName) ) {

classNameArr.push(objChild[i]);

}

}

return classNameArr;

}

}

// 判断object元素的class属性值中是否含有objectClassName

function hasClassName(object, objectClassName) {

// 将class属性值由空格切分为数组

var classNameList = object.className.split(/\s+/);

// 判断

for(var j = 0; j 

return classNameList[j] = objectClassName ? true : false;

}

}