一、头部定高,底部占满
<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;
}
PS:
还有一种方法,再wrap里放一个main,warp给width和height都是100%;
main也是width和height为100%;
然后main还有一些操作:
(1)main有一个padding;架起header或者bottom;
(2)main给一个相对定位:postion:relative
再加一些others给绝对定位
position:absolute
填充main里padding给出的位置