相思资源网 Design By www.200059.com

在最外层div加以下样式

height:100%;
overflow:hidden;

其它方法:

Div即父容器不根据内容自适应高度,我们看下面的代码:

复制代码代码如下:
<div id="main">
<div id="content"></div>
</div>

当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。

我们可以通过三种方法来解决这个问题 
1增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。

复制代码代码如下:
<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

2增加一个容器,在代码中存在,但在视觉中不可见。

复制代码代码如下:
<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>

3增加一个BR并设置样式为clear:both。

复制代码代码如下:
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

补充:

复制代码代码如下:
<div id="main">
<div id="content">
<p>demo1</p>
<p>demo2</p>
<p>demo3</p>
</div>
</div>
#main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;}
#content { float:left;}

以上三个方法都不是最好的解决方法,因为在程序代码观念中是提倡尽量不要添加无意义的标签代码

标签:
子元素,div高度,自适应高度

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“子元素div高度不确定时父div高度如何自适应”

暂无子元素div高度不确定时父div高度如何自适应的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。