1. 程式人生 > >height:100%; 不起作用的四種解決方法,子級溢位來父級卻沒有撐開

height:100%; 不起作用的四種解決方法,子級溢位來父級卻沒有撐開

專案中遇到一個問題:
父級高度是auto,子級高度100%但是元素卻無法撐滿,總結了一下有下面三種方法,親測有效:

1:給父元素設為塊級並加固定高度

2: 父元素height:auto; overflow:hidden;

3: 不苛求相容性的話父級display: flex; 就可以了

順便說一下另外一個問題:

專案中父級高度是auto,但是子級溢位來父級卻沒有撐開,如下圖:

子元素溢位

兩種可能:

一、使用了float

  1. 在浮動結束的容器後面加上這段程式碼,清除浮動
<div style=”clear:both;”></div>
  1. 在外層DIV(父級)的CSS裡面加入以下CSS程式碼
overflow: auto;

二、使用了absolute

去掉position:absolute; 或者改成 relative;

上述兩種情況都是屬於 脫離文件流 的原因造成的,解決了這個,問題也就開朗啦~~

這裡寫圖片描述