讓頁腳始終在頁面底部，不論頁面內容是多或者少頁腳始終在頁面底部。
方法一：
/*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。