三种方法实现两栏等高自适应布局（《CSS世界读书笔记》）

前言

本文为张鑫旭《CSS世界》读书笔记，代码实现思路亦来源此书。

效果需求：

实现两栏布局，要求无论哪一栏的内容多，两栏高度均以最高一栏为准，两栏的背景色需和容器高度相等，即竖直方向铺满容器。

【TIPS】这里为什么不用height: 100%呢？原因在于必须给父元素设定具体高度值，此属性值才会起作用，但大部分情况下，我们是不太会给父元素的高度定死的。

代码实现：

方法一：使用 display:table-cell ，将两栏作为单元格处理，而单元格本身就具有天然等高作用，直接就可达到效果需求啦~

方法二：使用margin负值实现

众所周知，给一个元素padding值可以扩大此元素背景颜色的显示范围，故为了两栏背景色在视觉上高度一致，给两栏元素加上较大的padding-bottom以保证最大范围内两者同高度。但这样一来，两栏元素的高度太高，影响了后面元素的显示位置，所以此时加上一个margin-bottom，取值和padding-bottom相等但取其负值，以正负抵消额外产生的元素外部高度，就不会把后文挤到很后面去，且视觉上多了很大的高度的可使用的背景色。

这样一来，离成功就不远了。效果图如下：

从图中可以看出，后