需要实现这么一个效果:
主内容比较多,而且内容高度不固定,侧栏内容比较少,但是为了美观需要高度跟随主内容高度改变,以达到底部对齐的效果
首先想到的是在右侧栏上添加height:100%;的样式,但是外层上如果不明确写明高度,这个100%是不会被侦测到的,而在外层上写一个高度的话,ie6不会出问题,但是ie7和ff会严格实现这个高度,所以当设定的高度被超出就会出现问题.
后来发现一种比较简单的方法可以实现这个效果而且只需几行css,不需要js,不需要hack,ie6,ie7,ff下测试均未发现问题,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两列自适应布局</title>
<style type="text/css">
.out{overflow:hidden; width:650px; margin:0 auto;}
.div1{padding-bottom: 5000px; margin-bottom: -5000px; width:490px; background:#ff1; float:left; margin-right:10px;}
.div2{padding-bottom: 5000px; margin-bottom: -5000px; width:150px; background:#ccc; float:left;}
</style>
</head>
<body>
<div class="out">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
</body>
</html>
实现的效果为:
初始状态:
在左侧栏增加br标签后的效果:
可以发现右侧的div可完全根据左侧的高度来改变.
当然这只是一个小trick,真正把它放在大型网站上，还是比较担心会发生这样那样的问题，尤其是向后兼容性，说不定会埋下地雷，后来查找了一下，发现新浪读书频道的内页也使用了这个效果，但是他们的开发人员是用最稳定，最简单的方法来实现这个效果的，其实就是在最外层div把右侧div的背景用1px高的背景图片纵向平铺，如果右侧div有border,那么紧接着这个最外层div增加一个高1px的横向border(纵向border可以被包括在背景图片里)。
当然这个做法也是有缺陷的，首先最下方新增加的那个“堵头”完全没有语义，只是为了实现效果而存在，但是在目前各浏览器各自为政，css1本身就存在诸多问题的前提下，也就不能苛求什么了，所以推荐使用这种解决方法。