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;}
这样就实现了div高度自适应。
本文地址：软件教程频道 https://www.eeeoo.cn/ruanjian/903469.html，嗨游网一个专业手游免费下载攻略知识分享平台，本站部分内容来自网络分享，不对内容负责，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
