里面的div怎么撑开外面的div让高度自适应_cssdiv高度自动撑开 - CSDN文库

div无法撑开

103 浏览量更新于2023-03-16 评论收藏 46KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

里面的里面的div怎么撑开外面的怎么撑开外面的div让高度自适应让高度自适应

希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且

如果有背景，也能够自适应，下面有个示例大家可以参考下

随着微软新操作系统的上市，ie6现在用的人越来越少了，但是XP系统看来是太过经典，仍然有相当多的用户在使用，且这部

分人群中的大部分也没有单独升级浏览器的习惯，于是乎ie6依旧是使用最多的浏览器版本。根据本站流量的统计，来自ie6的

访问比重为72.6%。表明了以上的观点，虽然最高的时候，ie6占了90%以上。

言归正传，div+css作为网页的布局已经是大势所趋。它的优点不在这里啰嗦。但最近经常有朋友提到关于容器高度自适应的

兼容性问题。在这里简单作答。

1.有些时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，

且如果有背景，也能够自适应。在一般情况下，使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-

height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性：

复制代码

代码如下:

height:auto!important;

height:200px;

min-height:200px;

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

容器又是浮动的。例如

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

其中class为fuqin的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>

.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38724106

粉丝: 3
资源: 911

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈