如何讓DIV自適應高度

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

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

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

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

有一DIV盒子,默認高度為200px,當DIV里內(nèi)容多余并超出限定高度時,DIV自適應高度, 要求使用純CSS+DIV,不需要JS,兼容火狐瀏覽器

1、回答與解釋：

_height:200px; /* css 注解： 僅IE6設別此屬性，假定最低高度是200px ，設置高度200px，內(nèi)容超出后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，當內(nèi)容較少時DIV盒子的最小高度為200px,當內(nèi)容比較多超出高度能裝下時，DIV盒子自適應高度，為了便于觀察與參考分析，我們統(tǒng)一設置寬度為100px,一個黑色1px CSS邊框。

CSS代碼如下：

div{_height:200px; min-height:200px; border:1px solid #000; width:100px} 
/* css注釋：設置最小高度，border邊框，寬度 */ 
HTML代碼片段：
<div>200高度能裝下這點內(nèi)容，設置最小高度200px</div> 
<div>設置最小高度200px<br /> 
而內(nèi)容多，超出200px高度限制，DIV自適應高度<br /> 
<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位 
</div>

CSS默認自適應高度

當我們不對DIV設置固定高度或不設置CSS高度樣式，其DIV盒子默認是自適應高度。

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

相關閱讀：

最新的JS面試題解析

原生js的常用方法整理

最新的JS面試題解析

以上就是怎樣讓DIV自適應高度的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！