首页 > 前端 > 【经典布局】双列等高弹性布局

【经典布局】双列等高弹性布局

双列等高弹性布局是一种比较经典的布局。应用的场景一般是两个并排 div 的内容不固定，但又背景颜色，要求两者的背景高度要一致，也就是两者的高度要相等。双列等高弹性布局就是为了解决这一需求的。

 一、原理分析

平时我们做带背景的双列布局时，一般都是 float，此时两列的高度就是它们的实际高度。如果它们有背景颜色的话，我们会看到两列高度不一的背景。就像下面这样：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width: 1000px;border: 1px solid;overflow: auto;">
		<div style="float: left; width: 50%; background-color: red;">左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧</div>
		<div style="float: left; width: 50%; background-color: green">右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧</div>
	</div>
</body>
</html>

这种样式看起就相当不协调。那有没有什么办法可以改进一下呢？

这时我们需要用到一个属性——padding。在盒模型渲染中，padding值也是属于盒模型的高度，也就是说可以被 background 覆盖的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width: 1000px;border: 1px solid;overflow: auto;">
		<div style="float: left; width: 50%; background-color: red; padding-bottom: 9999px;">左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧</div>
		<div style="float: left; width: 50%; background-color: green">右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧</div>
	</div>
</body>
</html>

当然直接这样肯定是不行了，元素高度已经被改变了。不过我们可以再稍微变通一下，如果对一个加了 padding 值的块元素再应用负值的 margin，那不就相当于没有变化吗？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width: 1000px;border: 1px solid;overflow: auto;">
		<div style="float: left; width: 50%; background-color: red; padding-bottom: 9999px; margin-bottom: -9999px;">左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧</div>
		<div style="float: left; width: 50%; background-color: green">右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧</div>
	</div>
</body>
</html>

看，左侧虽然内容不够，但是因为 padding 的原因，空白部分也有颜色了。但是，也是因为 padding 和 margin 的存在，父元素出现了滚动条了。因为父元素的默认高度直接来自于子元素的高度的累加，虽然我们应用了负值的 margin 去抵消 padding 了，但是那只是让父元素“以为”子元素就是这么高，子元素实际高度要高得多，所以出现了滚动条。

既然父元素的默认高度就是子元素去除我们设置的 padding 和 margin 的高度，那么我们直接对父元素应用 overflow 不就能隐藏多余部分了么？

二、实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width: 1000px;border: 1px solid;overflow: hidden;">
		<div style="float: left; width: 50%; background-color: red; padding-bottom: 9999px; margin-bottom: -9999px;">左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧左侧</div>
		<div style="float: left; width: 50%; background-color: green; padding-bottom: 9999px; margin-bottom: -9999px;">右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧右侧</div>
	</div>
</body>
</html>

看，完美解决！