等高布局

等高布局

是利用margin-bottom 可以减少自身的供 CSS 读取的高度，什么意思，我理解是这样的。

我已开始搞混的一个地方，背景是覆盖content和padding，而height和width就是content部分）(标准盒子)。

先用非常大的padding-bottom值，拉伸背景高度至非常大，再用相同大小的margin-bottom负值去抵销拉伸的背景（使overflow

在截取的时候，像是不存在这么大的padding值一样，还是根据内容来截取，不然会把padding-bottom部分截取进去），虽然说

是抵销，但其实元素的背景还是覆盖加了padding-bottom值后的范围，这时候包含块的overflow：hidden截取到内容相对最多的

那一列，其他内容较少的列content区域的高度虽然短，但是有和content同背景的padding-bottom部分来填充，形成了一个伪登

高布局。

css

.wrap{overflow: hidden;}
.left{width: 200px; background: lightcoral; padding-bottom: 9999px; margin-bottom: -9999px; float: left;}
.right{width: 300px; background: lightgreen; padding-bottom: 9999px; margin-bottom: -9999px; float: left;}

html

<div class="wrap">
        <div class="left">
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="right">
            <p>内容</p>
        </div>
</div>