我们在用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!
分享到:
相关推荐
如何设置 div 的最小高度.docx
最小高度能自适应高度IE.FF全兼容的div设置
假如div里有内容,即有元素,那么div默认有一个最小高度,如果div没有设置属性font-size:10px; ,那么该div最小的高度则是浏览器默认文本高度,反之,则是以font-size为准
在应用DIV布局时,有时会希望DIV的高度会随着内容的变化而变化,但是又想设置DIV的一个最小高度,特别是当DIV有背景色...设置div最小高度及高度自动伸展的实例</title> <style> .divHeight{height:400px;h
使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现Div的高度会固定在一个值不再发生变动,下面有个不错的示例感兴趣的朋友不要错过
拥有最小高度且能自适应高度同时全兼容IE、FF的div该如何设置呢?针对这个问题,下面的示例或许可以帮助到大家,喜欢的朋友可以尝试操作下
下面小编就为大家带来一篇CSS控制div宽度最大宽度/高度和最小宽度/高度的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
可是当发布者发布的内容比较少的时候,比如只有一行字,那内容部分就变的很小,不美观,可是我们直接设置一个高度的话,当内容很多时又会溢出,今天研究了一下兼容各浏览器设置DIV最小高度的方法,拿来分享。...
设置一个div层的最小宽度或高度即min-width与max-width后面均跟具体数字+html单位,下面有个示例,感兴趣的朋友可以了解下
在IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高度会固定在一个值不再发生变动,这个问题很是烦人。如下面的情况。 HTML...
描述:有一个div,宽高都是10px,font-size:12px结果在ie6下这个div的高度竟然是12px,也就是说高度会被字体的尺寸撑开。 这其实是经典的IE6的高度问题。...IE6 div最小高度去除方法以及IE6div垂直居中css样式
可是当发布者发布的内容比较少的时候,比如只有一行字,那内容部分就变的很小,不美观,可是我们直接设置一个高度的话,当内容很多时又会溢出,今天研究了一下兼容各浏览器设置DIV最小高度的方法,拿来分享。...
CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段...