三个div属性分别为
div1 float:left width:100%
div2 float:left width:50% height:100%
div3 float:left width:50% height:100%
div2 内是有文字内容的将其撑开成如图所示
问题:div3 虽然设为高度 100% 但并为达到我想用的效果
理想效果:是 div3 会根据div1 高度 自动撑开
三个div属性分别为
div1 float:left width:100%
div2 float:left width:50% height:100%
div3 float:left width:50% height:100%
div2 内是有文字内容的将其撑开成如图所示
问题:div3 虽然设为高度 100% 但并为达到我想用的效果
理想效果:是 div3 会根据div1 高度 自动撑开
首先你要明白height:100%
,这个100% 是根据那个元素的100%,
答案:是根据父级元素的。
那么你的 div1 的height:100%
是根据哪个元素的呢?
如果div1的父级元素没有定义高度,那么height:100%
这句话其实是没有效果的。
你可以把div1的高度设置成定值,即可看到效果。
PS:如果你想让div3的高度随着div2的高度撑满div1可以使用绝对定位属性。
<style>
.div1 {
background: #000;
overflow: hidden;
}
.div1::after {
display: block;
content: '';
clear: both;
}
.div2 {
width: 50%;
float: left;
background: #f00;
}
.div3 {
width: 50%;
float: left;
background: #eee;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
<div class="div1">
<div class="div2">
ddddddddd<br/>
ddddddddd<br/>
ddddddddd<br/>
ddddddddd<br/>
ddddddddd<br/>
ddddddddd<br/>
ddddddddd<br/>
ddddddddd<br/>
ddddddddd<br/>
</div>
<div class="div3">
</div>
</div>
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
3 回答1.4k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
4 回答1.6k 阅读✓ 已解决
2 回答2.5k 阅读✓ 已解决
2 回答1.9k 阅读✓ 已解决
https://jsfiddle.net/pnwz937z/2/
你是不是哪里弄错了
mdn 高度百分比解释
意思就是元素的容器高度未指定,使用百分百作单位的话,会变成auto。