怎么讓DIV自適應(yīng)高度

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

第二種：沒有最小高度，DIV完全自適應(yīng)高度。

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

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

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

1、回答與解釋：

_height:200px; /* css 注解： 僅IE6設(shè)別此屬性，假定最低高度是200px ，設(shè)置高度200px，內(nèi)容超出后IE6會(huì)自動(dòng)撐高設(shè)定高度 */

min-height:200px; /* css注釋： css最小高度為200px支持所有瀏覽器，IE6瀏覽器除外 */

這個(gè)設(shè)置，ie6,7,8 ,9,10,火狐等都能兼容

2、具體設(shè)置代碼：

div{ 
_height:200px; 
min-height:200px 
/* css 注釋：兩個(gè)放置不分前后順序，兼容所有瀏覽器 */ 
}

3、CSS最小高度與自適應(yīng)高度并存案例

我們?cè)O(shè)置2個(gè)DIV盒子，最小高度均為200px，當(dāng)內(nèi)容較少時(shí)DIV盒子的最小高度為200px,當(dāng)內(nèi)容比較多超出高度能裝下時(shí)，DIV盒子自適應(yīng)高度，為了便于觀察與參考分析，我們統(tǒng)一設(shè)置寬度為100px,一個(gè)黑色1px CSS邊框。

CSS代碼如下：

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

CSS默認(rèn)自適應(yīng)高度

當(dāng)我們不對(duì)DIV設(shè)置固定高度或不設(shè)置CSS高度樣式，其DIV盒子默認(rèn)是自適應(yīng)高度。

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

相關(guān)閱讀：

最新的JS面試題解析

原生js的常用方法整理

最新的JS面試題解析

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