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布局可以完美解決
