两栏布局:
代码:
<style>
*{margin: 0;padding: 0;}
html,body,.box2{
height: 100%;
}
.box1{
height: 100px;
background: red;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.box2{
width: 100%;
background: orange;
height: 100%;
padding: 100px 0px;
box-sizing: border-box;
}
.box3{
height: 100px;
background: red;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<!--固定方式 -->
<div class="box1">头部</div>
<div class="box2">中间内容</div>
<div class="box3">底部</div>
</body>