div控制最小高度又自适高度

我们在用 div 布局的时候经常会遇到这样的一种情况：我们需要设置一个 div 的高度，当里面的东西超过这个高度时，让这个容器自动被撑开，也就是自适应高度。当里面的信息很少时候，我们就设置它一个最小的固定高度。

我们知道，在 ie6 中，如果子容器的高度超过父容器的时候，父容器会被子容器撑开，所以我们可以直接设置一个 height 的高度值即可。但是在 ie7 和 firefox 就不行了，它不会自动撑开。

如果要设置自适应高度，我们可以采用 height:auto; 这个属性；不过这个属性 ie6 又不支持了。是不是很头痛？其实解决这个问题不难，而且方法也不少，这里推荐一种：(假设我们需要控制的这个 div 的最小高度是 100px，超过时就让里面的信息自动撑开)：

.div{

height:auto !important;

height:100px;

min-height:100px

}

注释：因为 !important 在 ie7 和 ff 都可以读到，而且权重高于后面的 height:100px；所以当在 ie7 和 ff 显示的时候，就会用了前面的 height:auto !important; 而 ie6 识别不了!important，auto 对它也不管用，因此会应用了后面的 height:100px 的样式；而 min-height:100px 表示最小高度为 100px；此属性在 ie7 和 firefox 都可以识别。

这样一个完美的即可以设置最小高度，有可以自适应高度的 css 样式就出来了，同时兼容了 ie6、ie7 和 firefox！