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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

網(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ù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有立山免費網(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代碼如下：




    footer沉底效果
    
        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;
        }
    




     content

footer

本著能使用css解決就絕對不使用js的原則，這個方法雖然最容易想到，但是還是不推薦使用，而且，這段css代碼要獲取clientHeight，將會導(dǎo)致頁面頁面重排和重繪，性能考慮上來說，也不推薦。

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

flex布局中的justify-content: space-between;搭配超級好用的min-height，剛好可以滿足在content內(nèi)容不足的時候，footer的沉底效果

demo代碼如下：




    footer沉底效果
    
        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的高度，但是可以設(shè)置一個最小高度，這樣有利于布局
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #content {
            background: blue;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: red;
        }
    




     
        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content

footer

min-height實在是超級好用的一個css屬性了，搭配flex輕松實現(xiàn)沉底效果。

方法3 巧用flex + margin-top

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




    footer沉底效果
    
        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; // 重點代碼
        }
    




     
        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content  

        content

footer

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

99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

新聞中心

其他資訊