在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；如果內容足夠長時，頁腳塊會被內容向下推送，我們看到的效果就如下面兩張圖這樣。這種效果基本是無處不在的，很受歡迎。
那么面對這樣的問題有什么解決方法呢？首先我們先構建簡單的代碼
<body>
<div class="content"></div> <div class="footer"></div>
</body>
其中content為我們的內容區。下面開始介紹解決方法。
一、為內容區域添加最小的高度
這種方法重要用vh(viewpoint height)來計算整體視窗的高度(1vh等於視窗高度的1%),然后減去底部footer的高度，從而求得內容區域的最小高度。例如我們可以添加如下樣式：
.content{ min-height:calc(100vh-footer的高度); box-sizing:border-box; }
從而這個問題就解決了，但是如果頁面的footer高度不同怎么辦?每一個頁面都要重新計算一次，這是很麻煩的，所以這種方法雖然簡單但卻是不推薦的。
二、使用flex布局
這種方法就是利用flex布局對視窗高度進行分割。footer的flex設為0，這樣footer獲得其固有的高度;content的flex設為1，這樣它會充滿除去footer的其他部分。
代碼如下：
body { display: flex; flex-flow: column; min-height: 100vh; } .content { flex: 1; } .footer{ flex: 0; }
這樣的布局簡單使用，比較推薦。
三、在content的外面可以添加一個wrapper
這種方法就是在content的外面添加一個包裹容易，將html代碼改成這樣：
<body>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
然后添加以下樣式：
html, body, .wrapper { height: 100%; } body > .wrapper { height: auto; min-height: 100%; } .content { padding-bottom: 150px; /* 必須使用和footer相同的高度 */ } .footer { position: relative; margin-top: -150px; /* footer高度的負值 */ height: 150px; clear:both; }
另外，為了保證兼容性，需要在wrapper上添加clearfix類。其代碼如下：
<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
.clearfix{ display: inline-block; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結構。