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