css - 關(guān)于div自適應(yīng)問(wèn)題，大家看圖吧，說(shuō)不清
問(wèn)題描述
問(wèn)題解答
回答1：https://jsfiddle.net/pnwz937z/2/
你是不是哪里弄錯(cuò)了
mdn 高度百分比解釋
<percentage> 相對(duì)于元素的塊容器高度。如果塊容器的高度沒(méi)有顯式指定，計(jì)算值為 auto。 用在root 元素 (e.g. <html>) 上是相對(duì)于初始?jí)K容器（即顯示器的尺寸）。
意思就是元素的容器高度未指定，使用百分百作單位的話，會(huì)變成auto。
回答2：首先你要明白height:100%，這個(gè)100% 是根據(jù)那個(gè)元素的100%，答案：是根據(jù)父級(jí)元素的。那么你的 p1 的height:100% 是根據(jù)哪個(gè)元素的呢？如果p1的父級(jí)元素沒(méi)有定義高度，那么height:100%這句話其實(shí)是沒(méi)有效果的。你可以把p1的高度設(shè)置成定值，即可看到效果。PS:如果你想讓p3的高度隨著p2的高度撐滿p1可以使用絕對(duì)定位屬性。
回答3：html,body{ width: 100%; height: 100%; margin: 0; padding: 0;}回答4：
給父級(jí)高度設(shè)一個(gè)固定值，子級(jí)高度才能給百分比。如果父級(jí)沒(méi)給固定高度，子級(jí)給百分比也沒(méi)有效果的。
回答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：
你最高層級(jí)的父元素p都沒(méi)有給固定的高度，你下面給百分比肯定沒(méi)用啊
回答7：用什么float. 用flex布局可以完美解決
網(wǎng)公網(wǎng)安備