消息关闭
    暂无新消息!

三个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 高度 自动撑开


7个回答

︿ 0

https://jsfiddle.net/pnwz937z/2/

你是不是哪里弄错了

mdn 高度百分比解释

<percentage> 相对于元素的块容器高度。如果块容器的高度没有显式指定,计算值为 auto。 用在root 元素 (e.g. <html>) 上是相对于初始块容器(即显示器的尺寸)。

意思就是元素的容器高度未指定,使用百分百作单位的话,会变成auto。

︿ 0
    <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>
︿ 0

首先你要明白height:100%,这个100% 是根据那个元素的100%,
答案:是根据父级元素的。
那么你的 div1 的height:100% 是根据哪个元素的呢?
如果div1的父级元素没有定义高度,那么height:100%这句话其实是没有效果的。
你可以把div1的高度设置成定值,即可看到效果。
PS:如果你想让div3的高度随着div2的高度撑满div1可以使用绝对定位属性。

︿ 0

给父级高度设一个固定值,子级高度才能给百分比。如果父级没给固定高度,子级给百分比也没有效果的。