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

**前言：**前段时间开发的时候产品提出了一个需求：若干个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">
				![](http://upload-images.jianshu.io/upload_images/2204231-4281a0b0104295d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
			</div>
				撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 撑起高度的文本 
		</div>
		<div class="sub">
			<div class="sub-img">
				![](http://upload-images.jianshu.io/upload_images/2204231-4281a0b0104295d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
			</div>
				撑起高度的文本 
		</div>
		<div class="sub">
			<div class="sub-img">
				![](http://upload-images.jianshu.io/upload_images/2204231-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

.sub{
	margin-bottom: -9970px;
复制代码

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

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