css怎么設置div自適應高度

這篇文章主要介紹“css怎么設置div自適應高度”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css怎么設置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盒子自適應高度，為了便于觀察與參考分析，我們統(tǒng)一設置寬度為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>

4、在瀏覽器案例截圖

二、CSS默認自適應高度  

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

關于“css怎么設置div自適應高度”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。