在设计中我们进行两列或三列布局的时候往往需要让列的高度能够自适应,即每列的高度相同,当然前提是每列的高度都不知道.在用表格布局的时代这是非常容易的事情,但是现在我们是用标准的XHTML+CSS布局,虽然有点困难,但还是有很多解决的方案.
一般常用的方法有以下三种(当然不只这三种):
一.背景图填充法-也称视觉欺骗法:
就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉
CSS:
#container { float: left; background: url(images/example-2.gif) top left repeat-y; }
#container div { float: left; width: 200px; }
点击查看演示
这种方法最简单,最方便,但是如果需要给每栏加边框就出问题了.
二.容器溢出部分隐藏和列的负底边界及正的内补丁相结合
这种方法是本文介绍的重点,最先发明此方法的貌似是Alex Robinson,思路比较新颖.
但是如果要给列加上边框就发现问题了,底部不显示边框,因为他的真实底边被溢出隐藏了.
点击查看演示
那么如何解决这个问题呢,我们可以用外容器的背景来解决
三.采用负的左右边界和相对定位
这种方法比较另类,原理跟上一种差不多
点击查看演示
三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。
从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580，相当于在sideright左边580px，此时sideleft和middle位置重合。
优点：不需要背景图片，无hacks，完全的自适应高度。
缺点：现在的代码只能左对齐。
另外还可以用JS来控制,这里不推荐