http://www.yutheme.cn/website/index.php/content/view/39/63.html

div高度自適應是個比較麻煩的問題，在朋友artery那里看到這個文章，幫我解決了不少問題，摘錄下來:

Div即父容器不根據內容自適應高度，我們看下面的代碼：

<div id="main"><div id="content"></div> </div>

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

　　我們可以通過三種方法來解決這個問題?！?/p> 1?增加一個清除浮動，讓父容器知道高度。請注意，清除浮動的容器中有一個空格。 <div id="main"> <div id="content"></div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div> 2?增加一個容器，在代碼中存在，但在視覺中不可見。 <div id="main"> <div id="content"></div> <div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div> </div> 3?增加一個BR并設置樣式為clear:both。 <div id="main"> <div id="content"></div> <br style="clear:both;" /> </div>

補充：

<div id="main"> <div id="content"><p>demo1</p><p>demo2</p><p>demo3</p> </div> </div> #main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;} #content { float:left;}

以上三個方法都不是最好的解決方法,因為在程序代碼觀念中是提倡盡量不要添加無意義的標簽代碼

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

#main { height:100%;overflow:hidden; } 我的注解： 工作中遇到的問題，baidu了一下，還沒有時間去試試全部的方法，目前使用的是第3個方法

轉載于:https://www.cnblogs.com/JoannaQ/archive/2013/01/10/2853962.html

總結

以上是生活随笔為你收集整理的解决Div自适应高度的方法（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。