問題背景
很多網站設計一般是兩個部分，content + footer，content里面裝的是網站主體內容，footer里面展示網站的注冊信息等等，因為網站內容高度不定的原因，會出現下面兩種情況：
1.內容較少時，這個footer固定在在頁面的底部。如下所示：
2.內容較長時，footer跟在內容后面滑動，大致表現如下圖紅色框起來的部分:
這個需求在PC端還是很常見的，我在自己的應用中也遇到了這個問題，今天總結了一下實現這種布局的幾個方法。
方法1 使用js計算
為什么第一個就采用js控制的呢，因為實不相瞞，當初我第一次遇到這個問題的時候，直接就使用js去解決的（主要是我知道js肯定能實現的，所以也就沒有花時間去想別的方法）
主要思路是：在頁面加載完成后計算屏幕高度 - content內容真實的高度的值，如果差值大于
footer的高度，就給footer的style加上fixed定位，使它固定在屏幕底部。
demo代碼如下：
<!DOCTYPE html><html><head> <title>footer沉底效果</title> <style type="text/css"> div { margin: 0, padding: 0; box-sizing: border-box; position: relative; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; } #content { background: blue; } #footer { width: 100%; height: 100px; background: red; } .footer-fixed { position: fixed; left: 0; bottom: 0; } </style></head><body><div id="container"> <div id="content"> content </div> <div id="footer"> footer </div></div><script type="text/javascript"> let height = document.getElementById('container').clientHeight - document.getElementById('content').clientHeight; // 這里給footer加上另外的class,使其固定 if (height > 100) document.getElementById('footer').classList.add('footer-fixed');</script></body></html>本著能使用css解決就絕對不使用js的原則，這個方法雖然最容易想到，但是還是不推薦使用，而且，這段css代碼要獲取clientHeight，將會導致頁面頁面重排和重繪，性能考慮上來說，也不推薦。
方法2 采用flex布局 + min-height
flex布局中的justify-content: space-between;搭配超級好用的min-height，剛好可以滿足在content內容不足的時候，footer的沉底效果
demo代碼如下：
<!DOCTYPE html><html><head> <title>footer沉底效果</title> <style type="text/css"> div { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #container { width: 100%; // 重點代碼 // 雖然不知道container的高度，但是可以設置一個最小高度，這樣有利于布局 min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; } #content { background: blue; } #footer { width: 100%; height: 100px; background: red; } </style></head><body><div id="container"> <div id="content"> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div> <div id="footer"> footer </div></div></body></html>min-height實在是超級好用的一個css屬性了，搭配flex輕松實現沉底效果。
方法3 巧用flex + margin-top
這個技巧是在講margin auto的妙用中學到的，在flex格式化上下文中，margin auto會自動去分配剩余空間。這里面我們可以在footer上使用margin-top:auto來達到沉底效果。
<!DOCTYPE html><html><head> <title>footer沉底效果</title> <style type="text/css"> div { margin: 0; padding: 0; box-sizing: border-box; position: relative; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #container { width: 100%; min-height: 100%; display: flex; flex-direction: column; } #content { background: blue; } #footer { width: 100%; height: 100px; background: red; margin-top: auto; // 重點代碼 } </style></head><body><div id="container"> <div id="content"> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div> <div id="footer"> footer </div></div></body></html>總結：以上三種方法都屬于沒什么副作用的，其實實現這種沉底效果還有別的實現方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。
新聞熱點
疑難解答
