網站footer沉底效果的三種解決方案

時間 2019-11-07

原文原文鏈接

問題背景

不少網站設計通常是兩個部分，content + footer，content裏面裝的是網站主體內容，footer裏面展現網站的註冊信息等等，由於網站內容高度不定的緣由，會出現下面兩種狀況：
1.內容較少時，這個footer固定在在頁面的底部。以下所示：

2.內容較長時，footer跟在內容後面滑動，大體表現以下圖紅色框起來的部分（對應網址：http://www.sbc-mcc.com/）：
javascript

這個需求在PC端仍是很常見的，我在本身的應用中也遇到了這個問題，今天總結了一下實現這種佈局的幾個方法。css

方法1 使用js計算

爲何第一個就採用js控制的呢，由於實不相瞞，當初我第一次遇到這個問題的時候，直接就使用js去解決的（主要是我知道js確定能實現的，因此也就沒有花時間去想別的方法）
主要思路是：在頁面加載完成後計算屏幕高度 - content內容真實的高度的值，若是差值大於
footer的高度，就給footer的style加上fixed定位，使它固定在屏幕底部。
demo代碼以下：html

<!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，將會致使頁面頁面重排和重繪，性能考慮上來講，也不推薦。java

方法2 採用flex佈局 + min-height

flex佈局中的justify-content: space-between;搭配超級好用的min-height，恰好能夠知足在content內容不足的時候，footer的沉底效果
demo代碼以下：json

<!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來達到沉底效果。post

<!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>

總結：以上三種方法都屬於沒什麼反作用的，其實實現這種沉底效果還有別的實現方式，可是對其餘佈局有影響，這裏不贅述，以後有了更好的解決方案，再來更新。
PS：以前margin auto沒有深刻了解過，瞭解以後發現仍是很神奇的，推薦右邊文章探祕 flex 上下文中神奇的自動 margin性能

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。