</div>
</div>

负margin
因为背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,使背景色铺满元素区域,又符合元素的盒模型的计算公式,实现视觉上的等高效果
[注意]如果页面中使用<a>锚点跳转时,将会隐藏部分文字信息[注意]如果页面中的背景图片定位到底部,将会看不到背景图片CSS Code复制内容到剪贴板
<style>
body,p{margin: 0;}
.parent{
overflow: hidden;
}
.left,.centerWrap,.rightright{
float: left;
width: 50%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center{
margin: 0 20px;
}
.left,.rightright{
width: 25%;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="centerWrap">
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
</div>
</div>










