在寫高度自適應時遇到高度坍塌的問題及解決辦法

2021-09-26 16:28:19 字數 1268 閱讀 8028

問題描述:通常在寫高度自適應的時候,父級的高度通常要設定成自適應,其在頁面顯示的真正高度其實是由子元素撐開的高度。

通常在這種自適應的頁面中,布局通常會用到浮動,讓子元素浮動起來,可以在同一排顯示,但是子元素浮動後會脫離文件流,這會導致其父級失去高度,從而造成高度坍塌的問題。

如下圖:由於子元素現在為空,所以父級ul的內容為空,所以只顯示邊框

上圖**:

當給子元素li新增內容時,並讓它們浮動從而橫向排成一排時,就會造成高度坍塌,如下圖所示:父級ul沒有高度,只顯示了邊框

上圖**:

解決辦法有三種:

1)第一種是給父元素加overflow:hidden;觸發bfc機制,從而解決高度塌陷問題

上圖**:

2)在子元素末尾新增空標籤,設定屬性clear:both;height:0;overflow:hidden;如果是內聯元素可以加上display:block;原理也很簡單,對這個空標籤清除浮動,從而不讓浮動元素對它造成影響,這樣它就會在文件流中正確顯示出來,並且撐開父級元素的高度。

上圖**:

3)第三種方法也叫做萬能清除法,也是我比較推薦使用的一種方法。這種方法是通過偽類 :after 來實現的,通過在偽類中新增content:""; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;來解決高度坍塌的問題。

上圖**:

通過以上三種方法,就可以解決高度坍塌的問題,從而實現自適應的效果。

CSS 元素的高度,元素高度自適應螢幕高度

元素的高度預設是auto,被內容自動撐開 100 使得html的height與螢幕的高度相等 50 使得html的height等於螢幕的一半 若想讓乙個的高度與螢幕高度自適應,始終充滿螢幕,需要從html層開始層層新增height 100 元素沒有 margin和padding 元素有margin ...

cell的自適應高度

設有三張圖及三張段文字並且一一對應匹配,那麼應該獲取顯示文字label的尺寸和相應的uiimageview尺寸 需要注意的是無論的大小如何變化,但是的長寬之比是不變的 1 求cell高度的方法是 tableview 的delegate 所提供的協議方法 主要是用來設定每一行高度該方法在mainvie...

元素的高度自適應

網頁布局中有時候有的高度需要根據內容調整,所以不能固定,今天就來說說,最小高度自適應 屬性 min height 最小高度,但ie6不識別該屬性,height在ie6中類似min height屬性 以下是解決bug問題方法 hack1 min height value height value ie...