web開發(fā)中里面的div怎么撐開外面的div讓高度自適應(yīng)

今天就跟大家聊聊有關(guān)web開發(fā)中里面的div怎么撐開外面的div讓高度自適應(yīng)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

隨著微軟新操作系統(tǒng)的上市，ie6現(xiàn)在用的人越來(lái)越少了，但是XP系統(tǒng)看來(lái)是太過(guò)經(jīng)典，仍然有相當(dāng)多的用戶在使用，且這部分人群中的大部分也沒(méi)有單獨(dú)升級(jí)瀏覽器的習(xí)慣，于是乎ie6依舊是使用最多的瀏覽器版本。根據(jù)本站流量的統(tǒng)計(jì)，來(lái)自ie6的訪問(wèn)比重為72.6%。表明了以上的觀點(diǎn)，雖然最高的時(shí)候，ie6占了90%以上。

言歸正傳，div+css作為網(wǎng)頁(yè)的布局已經(jīng)是大勢(shì)所趨。它的優(yōu)點(diǎn)不在這里啰嗦。但最近經(jīng)常有朋友提到關(guān)于容器高度自適應(yīng)的兼容性問(wèn)題。在這里簡(jiǎn)單作答。

1.有些時(shí)候，我們希望容器有一個(gè)固定高度，但當(dāng)其中的內(nèi)容多的時(shí)候，又希望高度能夠自適應(yīng)，也即容器在縱向能被撐開，且如果有背景，也能夠自適應(yīng)。在一般情況下，使用min-height即可解決。但是廣大網(wǎng)民的首選瀏覽器ie6并不支持min-height。ie7,opera,火狐沒(méi)有問(wèn)題。所以采用以下寫法可以解決兼容性：

代碼如下:

height:auto!important;
height:200px;
min-height:200px;

2.很多朋友反映用上面的方法后，在有些時(shí)候依然無(wú)法解決容器無(wú)法撐開自適應(yīng)的問(wèn)題。那一定是有容器嵌套的情況下，而子容器又是浮動(dòng)的。例如
<div class="fuqin"><ul><li>內(nèi)容1</li><li>內(nèi)容1</li></ul></div>
其中class為fuqin的div有浮動(dòng)的li，當(dāng)li比較多的時(shí)候，即便是div設(shè)置的是最小高度，也無(wú)法被撐開。

原因就在于作為子容器的li是浮動(dòng)的即 。在這種情況下，即便是li的內(nèi)容超過(guò)了div的高度，div也無(wú)法撐開。

解決方法如下：
在浮動(dòng)的容器后面，父容器結(jié)束之前加入一個(gè)div

代碼如下:

<div class="fuqin"><ul><li>內(nèi)容1</li><li>內(nèi)容1</li&gt;</ul><div class="clearfloat"></div></div>
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}

看完上述內(nèi)容，你們對(duì)web開發(fā)中里面的div怎么撐開外面的div讓高度自適應(yīng)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。