一、头部定高，底部占满
<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给出的位置
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
