波多野结衣简介_爱的色放3_欧美精品一区二_五月亚洲婷婷_美女被娇喘视频_亚洲午夜免费_好吊色视频988gao在线观看_在线一区_99久久精品免费视频_欧美色吊丝_亚洲色图小说_亚洲两性视频_男女做的视频_亚洲自拍图片_免费黄色一级片

資訊專欄INFORMATION COLUMN

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

立即前往

首頁/文章專欄/Sticky Foolter 幾種實現(xiàn)方式

Sticky Foolter 幾種實現(xiàn)方式

張漢慶發(fā)布于2019-08-30 11:03 / 947人閱讀

摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實現(xiàn)，而且像上面計算或添加額外的元素。

CSS實現(xiàn)Sticky Footer 什么是 “Sticky Footer”

所謂 “Sticky Footer”，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。

先來看看下面的例子, 代碼如下


    頂部


    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分


    
    底部

.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow: auto;
    box-sizing: border-box;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

細(xì)心讀者應(yīng)該發(fā)現(xiàn)問題了,底部 footer 位置會隨著主體內(nèi)容高度變化自動變化,當(dāng)主體內(nèi)容小于視口的高度時, footer 并沒有黏貼在底部. 那么解決這樣問題尼?

negative margin


    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分


    
    底部

html,
body {
    height: 100%;
}
.header{
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    position: fixed;
    width: 100%;
}
.main {
    min-height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 50px;
    padding-top: 50px;
    margin-bottom: -50px;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

固定高度解決方案

使用如下屬性

min-height

calc

calc() 是 CSS3引入的,讓你在聲明CSS屬性值時可以執(zhí)行一些計算.
它可以用在一些數(shù)值場合; 詳細(xì)可以查閱這里 MDN

vh(Viewport Height): 顧明思議,表示的是視口的高度.

詳細(xì)信息以及兼容可以查閱這里: caniuse

針對上面的代碼進(jìn)行修改,如下

.main {
    min-height: calc(100vh - 50px - 50px);
}

這樣完成我們期望的,但是有個缺點就是每次我們都要去計算 header、footer 的高度.
這顯然不完美, 假如DOM結(jié)構(gòu)層級多的話,需要計算的內(nèi)容更多.

absolute

absolute相信大家熟悉不過了,這里就不在啰嗦了; 這里注意這個就行, absolute 元素其位置是根據(jù)什么來進(jìn)行計算并進(jìn)行定位的?


    頭部


    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分
    中間部分


    
    底部

html{
    position: relative;
    min-height: 100%;
}
body{
    margin-bottom: 50px;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow: auto;
}

.footer {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

代碼是不是很簡單,這里主要 position的應(yīng)用：

1 默認(rèn)情況下, 當(dāng)給某個元素設(shè)置為 position:absolute 時, 在祖先元素沒有設(shè)置 position: absolute or fixed or relative
時, 其默認(rèn)相對于初始包含塊( initial containing block ).

2 什么初始化包含塊?

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin;

這是w3c對包含塊介紹, 這段話大概意思, 根元素(document)為默認(rèn)為初始化包含塊,其初始化塊的大小為視口的大小.

理解這幾個概念后,我們再來看上面的代碼就一目了然了!

    html{
        position: relative;
        min-height: 100%;
    }

    body{
        margin-bottom: 50px;
    }

position:relative 改變包含塊,讓設(shè)置absolute元素根據(jù)html元素來進(jìn)行定位.

min-height: 保證在內(nèi)容不足視口時, footer能黏貼在底部.

margin-bottom 值為 footer 元素的高度,這樣保證內(nèi)容區(qū)域不會被footer遮住.

Flexbox

Flexbox是最完美的方案。只需要幾行CSS代碼就可以實現(xiàn)，而且像上面計算或添加額外的HTML元素。

Flexbox介紹可以查閱阮一峰老師這邊文章
修改代碼如下:


    
        頂部
    
    
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
        中間部分
    
    
        
        底部

html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}

.main {
    overflow: auto;
    box-sizing: border-box;
    flex: 1;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

最終效果如下:

negative =margin、固定寬度、absolute 都依賴底部高度為固定.

一般推薦使用 flex box 實現(xiàn)方式; 具體用那種可以根據(jù)具體場景來使用.