这里向大家描述一下如何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表示最小高度为100px;此属性在IE7和firefox都可以识别。

    这样一个完美的即可以使用DIV控制最小高度,又可以自适应高度的css样式就出来了,同时兼容了IE6、IE7和firefox!

Tags:css, div, 自适应, 高度