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

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

創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元陽(yáng)西做網(wǎng)站,已為上家服務(wù),為陽(yáng)西各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

問(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代碼如下：

<!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解決就絕對(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代碼如下：

<!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è)置一個(gè)最小高度，這樣有利于布局
            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實(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á)到沉底效果。

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

網(wǎng)頁(yè)名稱：網(wǎng)站footer沉底效果的三種解決方案
文章網(wǎng)址：http://bm7419.com/article24/gejpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站改版、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站維護(hù)

廣告

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

成都網(wǎng)頁(yè)設(shè)計(jì)公司