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

方法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代码:

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

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代码:

<div class="parent" id="parent">
    <div class="left equalHeight"></div>
    <div class="middle equalHeight"></div>
    <div class="right equalHeight"></div>
</div>

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 < len; i++) {
    elementsHeight[i] = equalHeightElement[i].offsetHeight;
}
// 获取等高元素组中最大高度的元素的高度值
var maxHeight;
for(var i = 0, len = elementsHeight.length; i < len; i++) {
    maxHeight = elementsHeight[0];
    maxHeight = maxHeight > elementsHeight[i] ? maxHeight : elementsHeight[i];
}
// 给每一个等高元素组的定义高度为最大高度maxHeight
for(var i = 0, len = equalHeightElement.length; i < len; 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 < objChild.length; 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 < classNameList.length; j++) {
        return classNameList[j] = objectClassName ? true : false;
    }
}
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/264