1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > css实现div高度自适应

css实现div高度自适应

时间:2022-10-30 06:54:14

相关推荐

css实现div高度自适应

1、有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应。在一般情况下,使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐,谷歌没有问题。所以采用以下写法可以解决兼容性:

height:auto!important;height:200px;min-height:200px;

2、很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下,而子容器又是浮动的。例如:

<div class="test"><ul><li>内容1</li><li>内容1</li></ul></div>

其中class为test的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度min-height,也无法被撑开。原因就在于作为子容器的li是浮动的 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。

解决方法如下:

在浮动的容器后面,父容器结束之前加入一个div,代码如下:

<div class="test"><ul><li>内容1</li><li>内容1</></ul><div class="clearfloat"></div></div>.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。