css如何讓高度自適應(yīng)

發(fā)布時(shí)間：2021-04-09 09:45:44 來(lái)源：億速云閱讀：661 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下css如何讓高度自適應(yīng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css讓高度自適應(yīng)的方法：1、把父層高度設(shè)置成“height:auto;”樣式屬性；2、給添加父層添加“overflow:hidden;”樣式屬性，然后新建一個(gè)div放在后面，并添加樣式屬性“clear:both”即可。

打開(kāi)網(wǎng)頁(yè)開(kāi)發(fā)工具，新建一個(gè)HTML文件（這里為了方便給大家演示）

css如何讓高度自適應(yīng)

普通布局：只需要把外層高度設(shè)置成:height: auto;屬性即可自適應(yīng)：

css如何讓高度自適應(yīng)

方法二（浮動(dòng)布局）：

如果子元素設(shè)置浮動(dòng)float屬性后，外層DIV是不能夠自動(dòng)被撐開(kāi)的，如圖所示：

css如何讓高度自適應(yīng)

解決方法一：給添加父層添加：overflow: hidden;屬性

css如何讓高度自適應(yīng)

解決方法二：新建一個(gè)div放在后面，并添加樣式：clear: both；

css如何讓高度自適應(yīng)

以上是“css如何讓高度自適應(yīng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡