DIV默认高度且自适应高度

转：

本文和你们重点讨论一下如何控制DIV最小高度又DIV自适高度问题，若是咱们须要设置一个div高度，当里面的东西超过这个高度时，让这个容器自动被撑开，也就是DIV自适应高度。当里面的信息不多时候，咱们就设置它一个最小的固定高度。

如何控制DIV最小高度又DIV自适高度

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

咱们知道，在IE6中，若是子容器的高度超过父容器的时候，父容器会被子容器撑开，因此咱们能够直接设置一个height的高度值便可。可是在IE7和firefox就不行了，它不会自动撑开。

若是要设置DIV自适应高度，咱们能够采用height:auto;这个属性；不过这个属性IE6又不支持了。是否是很头痛？其实解决这个问题不难，并且方法也很多，这里推荐一种：(假设咱们须要控制的这个DIV最小高度是100px，超过期就让里面的信息自动撑开)：

Html代码

1. .div{  

    

2.  

    

    

    

   height:auto!important;  

    

3.  

    

    

    

   height:100px;  

    

4.  

    

    

    

   min-height:100px;  

    

5. } 

    

.div{ height:auto!important; height:100px; min-height:100px; }

 

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

这样一个完美的便可以设置DIV最小高度，又能够DIV自适应高度的css样式就出来了，同时兼容了IE六、IE7和firefox！