div高度自适应

盒模型的height的默认值为auto, 它表示盒模型的高度由它所包裹的内容高度来决定, 因此div不设置height的值就可以实现高度的自适应。然而在实际css布局实践中，常常出现一些特殊的需求。div的高度初始为某一固定高度，然后随着内容的增多高度自适应。css属性中min-height是专门来解决这个问题的， 它表示给盒模型设置一个最小的高度。 如min-height: 200px, 当div的内容高于200px时, div会自动伸展。IE6不支持这个属性，可以用css hack来解决。

<!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

 

 

posted @ 2013-09-30 11:49  不灭的野火  阅读(1072)  评论(0)  编辑  收藏  举报