css div自适应高度（兼容ie,firefox,ie8)

可以看到 ul 已经自动伸长了，但下面有个小小的黑点。相信你已经猜到了，这个黑点对应的就是 content:”.” 。
这个黑点肯定是要去掉的啦，我们可以用 font-size:0;line-height:0; 将其去掉。
好了，现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的css代码：

111com.net代码如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;/* ie */
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}

第二种方法
我刚说过不止一种方法可以解决，那现在就来说说第二种方法。第二种方法还要更简单一些。同样，需要将浏览器分成两个阵营。不过和上一个有所不同，这一次 ie7 站到了另外一个阵营。即 ie7, firefox, opera, safari 等(这里暂时称为a浏览器)。对于这些浏览器，只要定义一个 overflow:auto; 即可，但是对于 ie6 和 ie5 (称为b浏览器)却不起作用。不过要 ie6，ie5 听话也很简单。只要定义一个高度即可，哪怕是 0 ，也会自动伸长。知道这些还没用，我们还得区分这两个阵营的浏览器才行。怎么区分呢？
a 浏览器支持属性选择符，而b浏览器不支持。

所以以下代码只有a浏览器才会执行。

111com.net代码如下:
[xmlns] ul { /* html[xmlns] ul 的简写 */
overflow:auto;
}

需要注意的是html 必须要有< !doctype >头部以及有xmlns属性才会起作用。不过这个问题似乎不大，现在绝大部分网页都有这两个东东，包括 dreamweaver 默认新建的网页都会自动加上。

而对于b浏览器则可以通过以下方式：

111com.net代码如下:
* html ul {
height:1%;
}

其实 height 完全可以写成 0，为什么要写1%呢？告诉你其实我也不知道，大家都这么写。

好了，第二种方法的 ul 全部样式代码如下：

111com.net代码如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的简写*/
overflow:auto;
}
* html ul {
height:1%;
}

现在既然有两种方法，那么那一种更好呢？我个人比较喜欢第二种方法。原因很简单，代码更少，而且是符合标准的。只是在极少数情况下会出现滚动条，所以应该这两种方法配合使用。