一、头部定高，底部占满
<html>
<head>
<style type="text/css">
.wrap{
height:100%;
position:relative;
}.wrap>.mytop{
top:0px;
left:0px;
height:40px;
width:100%;
background:blue;
position:absolute;}
.wrap>.mybottom{
top:40px;
left:0px;
bottom:0px;
width:100%;
background:red;
position:absolute;
}</style>
</head><body>
<div class="wrap"><div class="mytop">
</div>
<div class="mybottom">
</div>
</div>
</body>
</html>
二、头部占满，底部定高
<html>
<head>
<style type="text/css">
.wrap{
height:100%;
position:relative;
}.wrap>.mytop{
top:0px;
left:0px;
bottom:40px;
width:100%;
background:blue;
position:absolute;}
.wrap>.mybottom{
height:40px;
left:0px;
bottom:0px;
width:100%;
background:red;
position:absolute;
}</style>
</head><body>
<div class="wrap"><div class="mytop">
</div>
<div class="mybottom">
</div>
</div>
</body>
</html>
当然有一种更简便的方法：
在容器里给一个padding，top定在padding里，bottom高度100%；
.wrpper{
height: 100%;
position: relative;
box-sizing: border-box;
padding-top: 0.9rem;
background: #fafafa;
}
头部：
.top {
box-sizing: border-box;
padding: .2rem .3rem;
height: .9rem;
position:absolute;
top: 0px;
left: 0px;
width: 100%;
}
底部：
.bottom{
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
