CSS 相对|绝对(relative/absolute)定位系列（三）

1. absolute与等高布局

拿简单的两栏布局举例，左栏与右栏有不同的背景色，且中间隔边框线分隔，如何实现？因为随着内容的不同，有可能左侧栏高度较高，也有可能是右侧栏高度较高。所以，要实现无缝的填色，定高是行不通的，置高度不理显然也不行，此时解决方法就是让左右两栏等高

我较早的时候写过一篇名为“纯CSS实现侧边栏/分栏高度自动相等”的小tip，其实现原理如下

后来在“我所知道的几种display:table-cell的应用”一文中也提过使用display:table-cell实现等高布局

这里再介绍些如何使用absolute实现等高布局

点击demo页面中的两个按钮就可以看到无论左侧栏高还是右侧栏高，两边背景颜色纯纯的，中间的垂直分隔线直直的，如下截图

其中，实现等高效果的核心CSS代码如下

全部代码

实现原理就是：首先设置一个红色背景的外层容器，这里包含一左一右两个容器，所以不管是左边还是右边的内容增加都会导致外层容器高度增加，进而导致红色背景层增高。然后我们给左边容器设置一个绿色的背景层，这个背景层宽度和左侧容器等宽，但高度是一个9999em的极高的高度，将其覆盖在红色的背景层之上，所以此时看起来的效果两列等高的一绿一红的等高列