并列不等高块状元素保持高度一致

前言：前段时间开发的时候产品提出了一个需求：若干个div并行排列，顶部对齐，这些div的高度和最高的div相等，并且高度是经常变化的。当时使用了JS来实现，但是一直觉得繁琐，后来查资料发现是可以用纯CSS实现的，所以特别记录下来。

通常来说其实不需要特别的设置相同高度，最高的块状子元素会自然的撑起父元素，如下图：

子元素无背景色

但是有时候子元素和父元素背景色不同，这是就会出现如下图的情况：

子元素背景色与父元素不同

这时候就需要将子div设置为等高了。

之前JS的实现，思路很简单，在触发load事件和resize事件时，获取并列块状元素的高度，并将最高高度赋值给全部块状元素。不过当时也踩过坑，比如计算高度的时候，直接获取高度而不是根据内部子div相加，这就导致了第一次设置高度后再也不会发生变化，唉，说多了都是泪。

这次改用纯CSS来实现，首先把基本的结构和样式实现：
HTML：

<div class="con">
    <div class="wrap">
        <div class="sub">
            <div class="sub-img">
                ![](https://img.haomeiwen.com/i2204231/4281a0b0104295d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            </div>
            <p>
                撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 
            </p>
        </div>
        <div class="sub">
            <div class="sub-img">
                ![](https://img.haomeiwen.com/i2204231/4281a0b0104295d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            </div>
            <p>
                撑起高度的文本 
            </p>
        </div>
        <div class="sub">
            <div class="sub-img">
                ![](https://img.haomeiwen.com/i2204231/4281a0b0104295d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            </div>
            <p>撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 </p>
        </div>
    </div>
</div>

CSS

*{margin: 0;padding: 0;} /*方便起见的reset*/
/*最外层包裹元素*/
.con{
    padding: 100px;
    background-color: #053a4f;
}
/*需要等高块状元素外部的包裹元素*/
.wrap{
    overflow: hidden;
}
/*需要等高的块状元素*/
.sub{
    width: 30%;
    box-sizing: border-box;
    padding: 30px;
    float: left;
    background-color: #fff;
    /*padding-bottom:10000px;*/
    /*margin-bottom: -9970px;*/
}
/*需要等高块状元素的内部样式*/
.sub:nth-child(1),.sub:nth-child(2){
    margin-right: 5%;
}
.sub-img img{
    width: 100%;
    margin-bottom: 10px;
}

此时页面如下图：

没有设置高度的情况
然后我们给子元素设置一个很长的padding-bottom。

.sub{
    padding-bottom:10000px;
}

此时页面如下图：

设置padding-bottom的情况
可以看到页面变得巨长无比，并且还不是等高的，别着急，我们再设置一个负的padding-bottom

.sub{
    margin-bottom: -9970px;
}

此时页面如下图：

设置负margin-bottom的情况

可以看到，页面已经变成我们想要的样子了，并且所有子元素高度会随着最高子元素高度改变并且保持一致。

是不是很神奇，这是由于负margin和padding计算方式不同所造成的，padding-bottom的计算方式是以元素本身为准，负margin-bottom的计算方式是以父元素为准，所以在padding-bottom足够大的情况下，负margin-bottom会将大家拉回同一起跑线，高度就保持一致了。