- 两列定宽和两列宽度自适应结构:
- 在ie7及以下,container的宽度和两列子元素的宽度设置为具体值或百分比的任意组合时,两列子元素即使浮动,container的高度也能自适应;其他浏览器需要为container清除浮动。
- 在ie7及以下,container的宽度设置为默认值auto时,container高度不能自适应,此时footer的位置会上移;两列宽度固定或自适应且和等于container的宽度时,假设footer宽度为auto,footer会出现在短的那一列的下方,如果短的一列在右边,那么footer的左边界与高的一列的右边界重合,如果短的一列在左边,那么footer的右边界与高的一列的左边界重合;两列宽度固定或自适应且和小于container的宽度时,如果两列分别左右浮动,那么footer就出现在两列间的缝隙中,宽度就是缝隙的宽度,如果两列仅向一边浮动,那么footer就出现在两列的另一侧,宽度为container宽度与两列宽度之差。
- 在第2点的基础上,假设设置了footer的宽度,它的边界计算规则不变,但是如果它的宽度超出了第2点所说的位置的宽度,那么就会下移。
- 解决第2/3点的办法是给footer清浮动,这样它就总是在两列之下了;对于其他浏览器仅为container清除浮动即可,同时设置并不会互相影响。
- 总结:非标准浏览器不支持伪类,因此清除不了container的浮动,只能用clear清除footer的浮动;标准浏览器只需要用:after来清除container的浮动,为了兼容,两个清除都要有。
- 两列等高:
- 背景模拟:为container添加背景图像,这种方法只能应用于两列定宽的情况,而且如果两列的位置发生变换,背景图也需更改。
- 负边距:为两列都设置margin-bottom:-9999px;padding-bottom:9999px; padding-bottom让列的背景色在垂直方向上“无限”延伸,但这样也会撑开容器,因此用负的margin-bottom将footer拉回到原来的位置;最后别忘了,要让container的overflow:hidden来隐藏掉由于padding-bottom撑开的高度。
- 用js脚本实现