让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。
方法一：
/*css
----------------------------------------------------------------------------------------------------*/
body,html {
height: 100%;
margin: 0;
}
.wrap {
position: relative;
min-height: 100%;
}
.main {
margin-bottom: 30px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<body>
<div class="wrap">
<div class="main">
</div>
<div class="footer"></div>
</div>
</body>
将html和body设置为高100%，将wrap相对定位最小高度为100%，footer相对wrap绝对定位到底部。
方法二：
/*css
----------------------------------------------------------------------------------------------------*/
body,html {
height: 100%;
margin: 0;
}
.main {
min-height: 100%;
}
.footer {
margin-top: -30px;
height: 30px;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<body>
<div class="main">
</div>
<div class="footer"></div>
</body>
将html和body设置为高100%，将main的最小高度设置为100%；将footer的margin-top的值设置为负的footer的高度大小。
方法三：
/*css
----------------------------------------------------------------------------------------------------*/
body {
padding: 30px 0;
box-sizing: border-box;
}
.main {
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<body>
<div class="main">
</div>
<div class="footer"></div>
</body>
将html和body高度设置为100%，将给body设置下边距为footer的高度并将box-sizing设置为border-box；将footer相对于body绝对定位。
方法四：
/*css
----------------------------------------------------------------------------------------------------*/
body {
margin:0;
padding: 0;
}
.wrap {
box-sizing: border-box;
position: relative;
min-height: 100vh;
padding-bottom: 200px;
}
.footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<div class="wrap">
<div class="footer"></div>
</div>
将.wrap最小高度设置为视口高度，padding-bottom设置为footer的高度，将box-sizing设置为border-box。.footer相对.warp绝对定位。【注意！！！此方法也可不添加.wrap，直接用body替换.wrap标签的位置也可。body{…} –> html：< body >< div class=”footer” >< /div >< /body >】 Firefox、Chrome、Safari以及IE8以上支持vh。