前言：前段時間開發(fā)的時候產(chǎn)品提出了一個需求：若干個div并行排列竖幔，頂部對齊码荔，這些div的高度和最高的div相等，并且高度是經(jīng)常變化的笙以。當(dāng)時使用了JS來實現(xiàn)淌实，但是一直覺得繁瑣，后來查資料發(fā)現(xiàn)是可以用純CSS實現(xiàn)的，所以特別記錄下來拆祈。
通常來說其實不需要特別的設(shè)置相同高度恨闪，最高的塊狀子元素會自然的撐起父元素，如下圖：
但是有時候子元素和父元素背景色不同放坏，這是就會出現(xiàn)如下圖的情況：
這時候就需要將子div設(shè)置為等高了咙咽。
之前JS的實現(xiàn)，思路很簡單淤年，在觸發(fā)load事件和resize事件時钧敞，獲取并列塊狀元素的高度，并將最高高度賦值給全部塊狀元素互亮。不過當(dāng)時也踩過坑犁享，比如計算高度的時候，直接獲取高度而不是根據(jù)內(nèi)部子div相加豹休，這就導(dǎo)致了第一次設(shè)置高度后再也不會發(fā)生變化炊昆，唉，說多了都是淚威根。
這次改用純CSS來實現(xiàn)凤巨，首先把基本的結(jié)構(gòu)和樣式實現(xiàn)：
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;*/
}
/*需要等高塊狀元素的內(nèi)部樣式*/
.sub:nth-child(1),.sub:nth-child(2){
margin-right: 5%;
}
.sub-img img{
width: 100%;
margin-bottom: 10px;
}
此時頁面如下圖：
然后我們給子元素設(shè)置一個很長的
padding-bottom。
.sub{
padding-bottom:10000px;
}
此時頁面如下圖：
可以看到頁面變得巨長無比洛搀，并且還不是等高的敢茁，別著急，我們再設(shè)置一個負(fù)的
padding-bottom
.sub{
margin-bottom: -9970px;
}
此時頁面如下圖：
可以看到留美，頁面已經(jīng)變成我們想要的樣子了彰檬，并且所有子元素高度會隨著最高子元素高度改變并且保持一致。
是不是很神奇谎砾，這是由于負(fù)margin和padding計算方式不同所造成的逢倍，padding-bottom的計算方式是以元素本身為準(zhǔn)，負(fù)margin-bottom的計算方式是以父元素為準(zhǔn)景图，所以在padding-bottom足夠大的情況下较雕，負(fù)margin-bottom會將大家拉回同一起跑線，高度就保持一致了挚币。
