css - 关于div自适应问题，大家看图吧，说不清
问题描述
问题解答
回答1：https://jsfiddle.net/pnwz937z/2/
你是不是哪里弄错了
mdn 高度百分比解释
<percentage> 相对于元素的块容器高度。如果块容器的高度没有显式指定，计算值为 auto。 用在root 元素 (e.g. <html>) 上是相对于初始块容器（即显示器的尺寸）。
意思就是元素的容器高度未指定，使用百分百作单位的话，会变成auto。
回答2：首先你要明白height:100%，这个100% 是根据那个元素的100%，答案：是根据父级元素的。那么你的 p1 的height:100% 是根据哪个元素的呢？如果p1的父级元素没有定义高度，那么height:100%这句话其实是没有效果的。你可以把p1的高度设置成定值，即可看到效果。PS:如果你想让p3的高度随着p2的高度撑满p1可以使用绝对定位属性。
回答3：html,body{ width: 100%; height: 100%; margin: 0; padding: 0;}回答4：
给父级高度设一个固定值，子级高度才能给百分比。如果父级没给固定高度，子级给百分比也没有效果的。
回答5：<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>回答6：
你最高层级的父元素p都没有给固定的高度，你下面给百分比肯定没用啊
回答7：用什么float. 用flex布局可以完美解决
网公网安备