版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zjuwwj/article/details/83352331
1. margin + padding
由于背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，使背景色铺满元素区域，实现视觉上的等高效果。
缺点在于，如果页面中使用锚点跳转时，将会隐藏部分文字信息；如果页面中的背景图片定位到底部，将会看不到背景图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,p{margin: 0;}
.parent{
overflow: hidden;
}
.left,.centerWrap,.right{
float: left;
width: 50%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center{
margin: 0 20px;
}
.left,.right{
width: 25%;
}
</style>
</head>
<body>
<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>
</body>
</html>
2. table-cell
table元素中的table-cell元素默认就是等高的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,p{margin: 0;}
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.centerWrap,.right{
display: table-cell;
}
.center{
margin: 0 20px;
}
</style>
</head>
<body>
<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>
</body>
</html>
3. border
这种方法想要生效，父容器不能使用overflow:hidden清除浮动，因为溢出隐藏是基于padding box的。
由于border不支持百分比宽度，所以适合至少是一栏定宽的布局，如果不考虑IE8浏览器，可以尝试使用vw单位，可以实现近似的百分比宽度效果。
优点是与margin+padding的方式相比，不会出现锚点定位带来的问题，所以更加稳健。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
<style>
body,p {margin: 0;}
.parent {
position: relative;
}
.center {
box-sizing:border-box;
padding: 0 20px;
background-clip: content-box;
border-left: 210px solid lightblue;
border-right: 310px solid lightgreen;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 300px;
}
</style>
</style>
</head>
<body>
<div class="parent" style="background-color: lightgrey;">
<div class="left">
<p>left</p>
</div>
<div class="center" style="background-color: pink;">
<p>center</p>
<p>center</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
参考：CSS等高布局的7种方式