要让一个div的高度根据屏幕大小变化，但不是铺满整屏，只占一个固定部分

<div id="main">

<div id="nav">nav</div>

<div id="content">content</div>

</div>

html, body {

height: 100%;

margin: 0px;

padding: 0px;

}

#main {

background-color: #999;

height: 100%;

}

#nav {

background-color: #85d989;

width: 100%;

height: 50px;

}

#content {

background-color: #cc85d9;

width: 100%;

position: absolute;

top: 50px;

bottom: 0px;

left: 0px;

}

重点是要top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域，神奇啊