前言：前段时间开发的时候产品提出了一个需求：若干个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">
</div>
<p>
撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本
</p>
</div>
<div class="sub">
<div class="sub-img">
</div>
<p>
撑起高度的文本
</p>
</div>
<div class="sub">
<div class="sub-img">
</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会将大家拉回同一起跑线，高度就保持一致了。
