div高度自適應

時間 2019-11-12

標籤 div 高度自適應欄目 CSS 简体版

原文原文鏈接

盒模型的height的默認值爲auto, 它表示盒模型的高度由它所包裹的內容高度來決定, 所以div不設置height的值就能夠實現高度的自適應。然而在實際css佈局實踐中，經常出現一些特殊的需求。div的高度初始爲某一固定高度，而後隨着內容的增多高度自適應。css屬性中min-height是專門來解決這個問題的，它表示給盒模型設置一個最小的高度。如min-height: 200px, 當div的內容高於200px時, div會自動伸展。IE6不支持這個屬性，能夠用css hack來解決。css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Div height adaptive</title>
<style type="text/css">
{
    overflow: hidden;
}
.box
{
    width: 200px;
    min-height: 200px;
    _height: 200px;
    border: 1px solid #ccc;
}
</style>
</head>
<body>
<p>內容高度小於200px</p>
<div class="boxwrapper">
    <div class="box">
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
    </div>
</div>
<p>內容高度大於200px效果</p>
<div class="boxwrapper">
    <div class="box">
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
    </div>
</div>
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。