Div父容器高度不根據內容自適應的解決方法

2021-04-23 22:31:13 字數 473 閱讀 8539

div即父容器不根據內容自適應高度,我們看下面的**:

example source code

[當content內容多時,即使main設定了高度100%或auto。在不同瀏覽器下還是不能完好的自動伸展。內容的高度比較高了,但容器main的高度還是不能撐開。

我們可以通過三種方法來解決這個問題。

一,增加乙個清除浮動,讓父容器知道高度。請注意,清除浮動的容器中有乙個空格。

example source code

[二,增加乙個容器,在**中存在,但在視覺中不可見。

example source code

[三,增加乙個br並設定樣式為clear:both。

example source code

[以上三個方法都不是最好的解決方法,因為在程式**觀念中是提倡盡量不要新增無意義的標籤**

介紹我的解決方法是直接在最外層div加以下樣式

#main

Div即父容器不根據內容自適應高度的解決方法

div即父容器不根據內容自適應高度的解決方法 div即父 容器不根據內容自適應高度,我們看下面的 當content內容多時,即使main設定了高度100 或auto。在不同瀏覽器下還是不能完好的自動伸展。內容的高度比較高了,但容器main的高 度還是不能撐開。我們可以通過三種方法來解決這個問題。一,...

父容器不根據內容自適應高度的解決方法

div即父容器不根據內容自適應高度的解決方法 div即父 容器不根據內容自適應高度,我們看下面的 當content內容多時,即使main設定了高度100 或auto。在不同瀏覽器下還是不能完好的自動伸展。內容的高度比較高了,但容器main的高 度還是不能撐開。我們可以通過三種方法來解決這個問題。一,...

div模擬textarea以實現高度自適應例項頁面

使用很簡單,乙個普通的block元素上加個contenteditable true 就ok了,如下 true外面的引號甚至去掉都沒關係。contenteditable屬性雖是html5裡面的內容,但是ie似乎老早就支援此標籤屬性了。所以,相容性方面還是不用太擔心的。ok,最麻煩的模擬textarea...