html
<body>
<div class="header">頭部</div>
<div class="content">主體</div>
<div class="footer">底部</div>
</body>
css
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
.header{height:60px;margin-bottom:-60px;background:red;positon:relative;}
.content{background:#ccc;min-height:100%;padding:60px 0 60px;}
.footer{height:60px;margin-top:-60px;background:#green;}