头部尾部始终处于两端（适用于pc端和移动端）
此代码展示的效果阐述：（随着屏幕宽高度的变化而变化）
当页面内容小于屏幕高度时，头尾分别处在屏幕顶部和屏幕底部；
当页面出现滚动条时，头尾分别处于屏幕顶部和内容底部；
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%; 这一步很关键
}
.container{
min-height: 100%; 这一步也很关键
position: relative;
}
.box{
width:100%;
height: 500px;
background: blue;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height:100px;
background: #64A131;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div id="footer">
footer
</div>
</div>
</body>
