真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

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

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

問(wèn)題背景

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

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

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

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

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

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

方法1 使用js計(jì)算

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

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

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

let height = document.getElementById('container').clientHeight - document.getElementById('content').clientHeight; // 這里給footer加上另外的class,使其固定 if (height > 100) document.getElementById('footer').classList.add('footer-fixed');

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

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

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

方法3 巧用flex + margin-top

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




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




     
        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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：網(wǎng)站footer沉底效果的三種解決方案-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://weahome.cn/article/dgchoe.html