web开发中里面的div怎么撑开外面的div让高度自适应-创新互联

今天就跟大家聊聊有关web开发中里面的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.很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下,而子容器又是浮动的。例如

  • 内容1
  • 内容1

其中class为fuqin的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度,也无法被撑开。

原因就在于作为子容器的li是浮动的即 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。

解决方法如下:
在浮动的容器后面,父容器结束之前加入一个div



代码如下:


  • 内容1
  • 内容1

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


看完上述内容,你们对web开发中里面的div怎么撑开外面的div让高度自适应有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


名称栏目:web开发中里面的div怎么撑开外面的div让高度自适应-创新互联
分享URL:http://myzitong.com/article/dpojoh.html