css-tips/div-height-adaptive.html at master · vanzheng/css-tips · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>盒模型的height的默认值为auto, 它表示盒模型的高度由它所包裹的内容高度来决定, 因此div不设置height的值就可以实现高度的自适应。然而在实际css布局实践中，常常出现一些特殊的需求。div的高度初始为某一固定高度，然后随着内容的增多高度自适应。css属性中min-height是专门来解决这个问题的， 它表示给盒模型设置一个最小的高度。 如min-height: 200px, 当div的内容高于200px时, div会自动伸展。IE6不支持这个属性，可以用css hack来解决。</p>
<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>