怎樣讓DIV自適應高度

在我們完成專案的時候，都會遇到，讓DIV自適應高度這個效果的實現，那麼今天我們就給大家做出倆種情況下怎麼實現DIV自適應高度的效果。

第一種：一定高度內容加多時自適應高度，而內容少時DIV有一定最小高度；

第二種：沒有最小高度，DIV完全自適應高度。

以下為大家介紹這兩種情況與解決方法

一定最小高度，內容加多時自適應高度，而內容少時DIV有一定最小高度  -   TOP

#有一DIV盒子,預設高度為200px,當DIV裡內容多餘並超出限定高度時,DIV自適應高度, 要求使用純CSS+DIV,不需要JS,相容火狐瀏覽器

1、回答與解釋：

_height:200px; /* css 註解： 僅IE6設別此屬性，假定最低高度是200px ，設定高度200px，內容超出後IE6會自動撐高設定高度*/ 

#min-height:200px; /* css註解#： css最小高度為200px支援所有瀏覽器，IE6瀏覽器除外*/ 

這個設置，ie6,7,8 ,9,10,火狐等都能相容

2、具體設定代碼：

div{ 
_height:200px; 
min-height:200px 
/* css 注释：两个放置不分前后顺序，兼容所有浏览器 */ 
}

3、CSS最小高度與自適應高度並存案例

我們設定2個DIV盒子，最小高度均為200px，當內容較少時DIV盒子的最小高度為200px,當內容比較多超出高度能裝下時，DIV盒子自適應高度，為了方便觀察與參考分析，我們統一設定寬度為100px,一個黑色1px CSS邊框。

CSS程式碼如下：

div{_height:200px; min-height:200px; border:1px solid #000; width:100px} 
/* css注释：设置最小高度，border边框，宽度 */ 
HTML代码片段：
<div>200高度能装下这点内容，设置最小高度200px</div> 
<div>设置最小高度200px<br /> 
而内容多，超出200px高度限制，DIV自适应高度<br /> 
<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位 
</div>

CSS預設自適應高度

#當我們不對DIV設定固定高度或不設定CSS高度樣式，其DIV盒子預設為自適應高度。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

最新的JS面試題解析

原生js的常用方法整理

最新的JS面試題解析

#

以上是怎樣讓DIV自適應高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！