先上代碼
<!DOCTYPE HTML>
<html lang="en" style="height: 100%; width: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo" style="position: absolute; width: 100%; min-height: 100%; height: auto;">
<div class="page-header navbar navbar-fixed-top">
//這部分的div的 position 是 fixed </div>
<div style="position: absolute; min-height: 100%; height: auto; width: 100%; text-align: center;">
<div class="page-container" style="position: relative; margin-bottom: 30px;"></div>
<div class="page-footer" style="position: absolute; bottom: 0px; display: block; width: 100%;"></div>
</div>
</body>
</html>
解析：
1、先設置<html>的 height 為 100%；
2、設置 body 的position 為 absolute，因為它里面的 div 有一個為 fixed，這樣可以使得 body 的范圍可以包括該div，如果設置為 relatve，則不包括該div。再設置 min-height 為 100%，使其最小高度也為 html 的 height；
3、讓內容 div 和頁腳 div 都包含在同一個外部 div 中，這樣頁腳在窗口縮小時不會上浮到內容 div 的位置。
4、外部 div 的 position 設置為 absolute，是由於 body 也為 absolute 的緣故，並設置其 min-height 為 100%，這樣可以使其高度最小為 body 的高度，height 為 auto，則使其可以任意改變。
5、頁腳 div 的 position 設置為 absolute，bottom 為 0，是為了絕對定位，讓其居於頁面底部。