裏面的div怎麼撐開外面的div,讓高度自適應

關於容器高度自適應的兼容性問題。

1.有些時候,我們希望容器有一個固定高度,但當其中的內容多的時候,又希望高度能夠自適應,也即容器在縱向能被撐開,且如果有背景,也能夠自適應。在一般情況下,使用min-height即可解決。但是廣大網民的首選瀏覽器ie6並不支持min-height。ie7,opera,火狐沒有問題。所以採用以下寫法可以解決兼容性:


代碼如下:

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


2.很多朋友反映用上面的方法後,在有些時候依然無法解決容器無法撐開自適應的問題。那一定是有容器嵌套的情況下,而子容器又是浮動的。例如

<div class="fuqin"><ul><li>內容1</li><li>內容1</li></ul></div>

其中class爲fuqin的div有浮動的li,當li比較多的時候,即便是div設置的是最小高度,也無法被撐開。 

原因就在於作爲子容器的li是浮動的即 。在這種情況下,即便是li的內容超過了div的高度,div也無法撐開。 

解決方法如下:

在浮動的容器後面,父容器結束之前加入一個div,代碼如下:

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章