footer固定在頁面底部的實(shí)現(xiàn)方法總結(jié)

longshengwang 發(fā)布于2019-04-23 13:08 / 2935人閱讀

摘要：方法二高度固定負(fù)值代碼頭部中間內(nèi)容底部信息代碼此方法把之前的元素放在一個(gè)容器里面，形成了和并列的結(jié)構(gòu)首先，設(shè)置的高度至少充滿整個(gè)屏幕其次，設(shè)置最后一個(gè)子元素的值大于等于的值最后，設(shè)置的值和負(fù)值。

方法一：footer高度固定+絕對(duì)定位

HTML代碼：

<body>
    <header>頭部header>
    <main>中間內(nèi)容main>
    <footer>底部信息footer>
body>

CSS代碼：

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
    margin:0;
    padding:0;
    position:relative;
}

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
    padding-bottom:100px;
    background:#ccc;
    text-align: center;
}
footer{
    position:absolute;
    color:#fff;
    bottom:0;
    width:100%;
    height:100px;
    line-height:100px;
    text-align:center;
    background-color: #000;
}

實(shí)現(xiàn)的效果：

首先，設(shè)置body的高度至少充滿整個(gè)屏幕，并且body作為footer絕對(duì)定位的參考節(jié)點(diǎn)；
其次，設(shè)置main（footer前一個(gè)兄弟元素）的padding-bottom值大于等于footer的height值，以保證main的內(nèi)容能夠全部顯示出來而不被footer遮蓋；
最后，設(shè)置footer絕對(duì)定位，并設(shè)置height為固定高度值。

優(yōu)點(diǎn)：footer一直存在于底部。

缺點(diǎn)：中間區(qū)域main如果內(nèi)容不夠，不能撐滿頁面的中間區(qū)域。

?方法二：footer高度固定+margin負(fù)值

HTML代碼：

<body>
    <div class="container">
        <header>頭部header>
        <main>中間內(nèi)容main>
    div>
    <footer>底部信息footer>
body>

CSS代碼：

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
.container{
    min-height:100%;
}

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ 
    padding-bottom:100px;
    background:#ccc;
    text-align: center;
}
footer{
    color:#fff;
    height:100px;
    line-height:100px;
    margin-top:-100px;
    text-align:center;
    background-color: #000;
}

此方法把footer之前的元素放在一個(gè)容器里面，形成了container和footer并列的結(jié)構(gòu)：
首先，設(shè)置.container的高度至少充滿整個(gè)屏幕；
其次，設(shè)置main（.container最后一個(gè)子元素）的padding-bottom值大于等于footer的height值；
最后，設(shè)置footer的height值和margin-top負(fù)值。

展示效果跟第一種是一樣的，缺點(diǎn)跟第一種也是一樣的。

方法三：footer高度任意+js

HTML代碼：

<header>頭部header>
<main>中間內(nèi)容main>
<footer>底部信息footer>

CSS代碼：

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
    margin:0;
    padding:0;
    position:relative;
}

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
    background:#ccc;
    text-align: center;
}
footer{
    color:#fff;
    width:100%;
    height:100px;
    line-height:100px;
    text-align:center;
    background-color: #000;
}
/* 動(dòng)態(tài)為footer添加類fixed-bottom */
.fixed-bottom {
    position: fixed;
    bottom: 0;
    width:100%;
}

JS（jquery）代碼：

$(function(){
    function footerPosition(){
        $("footer").removeClass("fixed-bottom");
        var contentHeight = document.body.scrollHeight,//網(wǎng)頁正文全文高度
            winHeight = window.innerHeight;//可視窗口高度，不包括瀏覽器頂部工具欄
        if(!(contentHeight > winHeight)){
            //當(dāng)網(wǎng)頁正文高度小于可視窗口高度時(shí)，為footer添加類fixed-bottom
            $("footer").addClass("fixed-bottom");
        }
    }
    footerPosition();
    $(window).resize(footerPosition);
});

常用的純css實(shí)現(xiàn)footer sticker

CSS代碼：

html, body, #sticker {height: 100%;}
    body > #sticker {height: auto; min-height: 100%;}
    #stickerCon {padding-bottom: 40px;} 
    #footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}

HTML代碼：

<div id="sticker">
    <div id="stickerCon">div>
div>
<div id="footer">footerdiv>

GPU云服務(wù)器云服務(wù)器 footer頁面底部固定頁面底部 html實(shí)現(xiàn)頁面底部頁面底部

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1475.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

longshengwang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

我的秋招復(fù)盤——回顧2022秋招經(jīng)歷

閱讀 2575·2021-11-22 09:34
測(cè)試?yán)碚摚?）軟件測(cè)試四大測(cè)試過程

閱讀 3552·2021-11-15 11:37
PayPal新注冊(cè)用戶領(lǐng)取10美元購物券，單筆交易滿20美元即可使用

閱讀 2355·2021-09-13 10:37
軟件測(cè)試崗位工作，到底可以做多久？

閱讀 2116·2021-09-04 16:40
畢設(shè)教程：基于嵌入式Linux和Web實(shí)現(xiàn)的視頻監(jiān)控系統(tǒng)(Arm/樹莓派/jetson)

閱讀 1596·2021-09-02 15:40
bowl - 輕量級(jí)的前端資源緩存加載器

閱讀 2467·2019-08-30 13:14
簡單說 CSS中的mask—好好利用mask-image

閱讀 3337·2019-08-29 13:42
小程序練習(xí)，仿bilibili小程序

閱讀 1914·2019-08-29 13:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

footer固定在頁面底部的實(shí)現(xiàn)方法總結(jié)

方法一：footer高度固定+絕對(duì)定位

?方法二：footer高度固定+margin負(fù)值

方法三：footer高度任意+js

常用的純css實(shí)現(xiàn)footer sticker

相關(guān)文章

**八種方法實(shí)現(xiàn)CSS頁面底部固定**

**八種方法實(shí)現(xiàn)CSS頁面底部固定**

緊貼底部的頁腳

**將footer固定在頁面底部的實(shí)現(xiàn)方法**

發(fā)表評(píng)論

0條評(píng)論

longshengwang

男|高級(jí)講師

TA的文章

我的秋招復(fù)盤——回顧2022秋招經(jīng)歷

測(cè)試?yán)碚摚?）軟件測(cè)試四大測(cè)試過程

PayPal新注冊(cè)用戶領(lǐng)取10美元購物券，單筆交易滿20美元即可使用

軟件測(cè)試崗位工作，到底可以做多久？

畢設(shè)教程：基于嵌入式Linux和Web實(shí)現(xiàn)的視頻監(jiān)控系統(tǒng)(Arm/樹莓派/jetson)

bowl - 輕量級(jí)的前端資源緩存加載器

簡單說 CSS中的mask—好好利用mask-image

小程序練習(xí)，仿bilibili小程序

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

footer固定在頁面底部的實(shí)現(xiàn)方法總結(jié)

方法一：footer高度固定+絕對(duì)定位

?方法二：footer高度固定+margin負(fù)值

方法三：footer高度任意+js

常用的純css實(shí)現(xiàn)footer sticker

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！