阅读:5913回复:0
里面的div怎么撑开外面的div让高度自适应
希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应,下面大家可以参考下:
关于容器高度自适应的兼容性问题 1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应。在一般情况下,使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性: 代码如下: height:auto!important; height:200px; min-height:200px; 2.很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下,而子容器又是浮动的。例如 <div class="fudong"> <ul> <li>内容1</li><li>内容1</li> </ul> </div> 其中class为fudong的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度,也无法被撑开。原因就在于:作为子容器的li是浮动的。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。 解决方法如下: 在浮动的容器后面,父容器结束之前加入一个div 代码如下: <div class="fuqin"> <ul> <li>内容1</li><li>内容1</li> </ul> <div class="clearfloat"></div> </div> <style type="text/css"> .clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;} </style> |
|