網站footer沉底效果的三種解決方案
很多網站設計一般是兩個部分，content + footer，content裡面裝的是網站主體內容，footer裡面展示網站的註冊資訊等等，因為網站內容高度不定的原因，會出現下面兩種情況：
1.內容較少時，這個footer固定在在頁面的底部。如下所示：
2.內容較長時，footer跟在內容後面滑動，大致表現如下圖紅色框起來的部分（對應網址：http://www.sbc-mcc.com/）：
這個需求在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 本著能使用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輕鬆實現沉底效果。
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
方法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>總結：以上三種方法都屬於沒什麼副作用的，其實實現這種沉底效果還有別的實現方式，但是對其他佈局有影響，這裡不贅述，之後有了更好的解決方案，再來更新。