網(wǎng)站footer沉底效果的三種解決方案-創(chuàng)新互聯(lián)

小編給大家分享一下網(wǎng)站footer沉底效果的三種解決方案，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的網(wǎng)站設(shè)計、成都做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有立山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

問題背景

很多網(wǎng)站設(shè)計一般是兩個部分，content + footer，content里面裝的是網(wǎng)站主體內(nèi)容，footer里面展示網(wǎng)站的注冊信息等等，因為網(wǎng)站內(nèi)容高度不定的原因，會出現(xiàn)下面兩種情況：

1.內(nèi)容較少時，這個footer固定在在頁面的底部。如下所示：

網(wǎng)站footer沉底效果的三種解決方案

2.內(nèi)容較長時，footer跟在內(nèi)容后面滑動，大致表現(xiàn)如下圖紅色框起來的部分:

網(wǎng)站footer沉底效果的三種解決方案

這個需求在PC端還是很常見的，我在自己的應(yīng)用中也遇到了這個問題，今天總結(jié)了一下實現(xiàn)這種布局的幾個方法。

方法1 使用js計算

為什么第一個就采用js控制的呢，因為實不相瞞，當(dāng)初我第一次遇到這個問題的時候，直接就使用js去解決的（主要是我知道js肯定能實現(xiàn)的，所以也就沒有花時間去想別的方法）

主要思路是：在頁面加載完成后計算屏幕高度 - content內(nèi)容真實的高度的值，如果差值大于

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，將會導(dǎo)致頁面頁面重排和重繪，性能考慮上來說，也不推薦。

方法2 采用flex布局 + min-height

flex布局中的justify-content: space-between;搭配超級好用的min-height，剛好可以滿足在content內(nèi)容不足的時候，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%;
            // 重點(diǎn)代碼
            // 雖然不知道container的高度，但是可以設(shè)置一個最小高度，這樣有利于布局
            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輕松實現(xiàn)沉底效果。

方法3 巧用flex + margin-top

這個技巧是在講margin auto的妙用中學(xué)到的，在flex格式化上下文中，margin auto會自動去分配剩余空間。這里面我們可以在footer上使用margin-top:auto來達(dá)到沉底效果。

<!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; // 重點(diǎn)代碼
        }
    </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>

以上是“網(wǎng)站footer沉底效果的三種解決方案”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：網(wǎng)站footer沉底效果的三種解決方案-創(chuàng)新互聯(lián)
URL標(biāo)題：http://www.rwnh.cn/article4/dgchoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、軟件開發(fā)、網(wǎng)站策劃、ChatGPT、營銷型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

網(wǎng)站footer沉底效果的三種解決方案-創(chuàng)新互聯(lián)