div高度自适应

时间:2014-02-18 23:37:02  来源:cnblog  作者:不灭的野火

盒模型的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>


顶一下
返回首页
回首页
收藏
收藏

参与评论(条)

注: 网友评论仅供表达个人看法,并不表达本站同意其观点或证实其描述

当前栏目分类