完美实现控制DIV最小高度和DIV自适高度

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

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

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

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

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

 
 
 

  
  
  
.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样式就出来了，同时兼容了IE6、IE7和firefox！

【编辑推荐】

1. DIV+CSS滑动门技术简介
2. DIV自适应高度写法简介
3. 14大CSS工具提高网页设计效率
4. 实现DIV图片居中方法揭秘
5. 鼠标经过时改变DIV背景颜色的三种途径