css - 关于div自适应问题，大家看图吧，说不清-PHP中文网问答

css - 关于div自适应问题，大家看图吧，说不清

天蓬老师 2017-04-17 15:05:37

[HTML讨论组]

761

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(7)

PHP中文网2017-04-17 15:07:37 7楼

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

你是不是哪里弄错了

mdn 高度百分比解释

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

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

赞 +0

添加回复

阿神2017-04-17 15:07:37 6楼

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

赞 +0

添加回复

高洛峰2017-04-17 15:07:37 5楼

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

赞 +0

添加回复

高洛峰2017-04-17 15:07:37 4楼

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

赞 +0

添加回复

天蓬老师2017-04-17 15:07:37 3楼

    <style>
    .p1 {
        background: #000;
        overflow: hidden;
    }
    
    .p1::after {
        display: block;
        content: '';
        clear: both;
    }
    
    .p2 {
        width: 50%;
        float: left;
        background: #f00;
    }
    
    .p3 {
        width: 50%;
        float: left;
        background: #eee;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    </style>
    <p class="p1">
        <p class="p2">
            ddddddddd<br/>
            ddddddddd<br/>
            ddddddddd<br/>
            ddddddddd<br/>
            ddddddddd<br/>
            ddddddddd<br/>
            ddddddddd<br/>
            ddddddddd<br/>
            ddddddddd<br/>
        </p>
        <p class="p3">
        </p>
    </p>

赞 +0

添加回复