欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS Sticky Footer 幾種實(shí)現(xiàn)方式

  發(fā)布時(shí)間：2019-06-05 15:14:24   作者：任重道遠(yuǎn)   我要評(píng)論
這篇文章主要介紹了CSS Sticky Footer 幾種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

什么是 “Sticky Footer”

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

先來(lái)看看下面的例子, 代碼如下

<div class="header">
    頂部
</div>
<div class="main">
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>底部</div>
</div>
.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)問(wèn)題了,底部 footer 位置會(huì)隨著主體內(nèi)容高度變化自動(dòng)變化,當(dāng)主體內(nèi)容小于視口的高度時(shí), footer 并沒(méi)有黏貼在底部. 那么解決這樣問(wèn)題尼?

negative margin

<div class="main">
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>底部</div>
</div>

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
  • vh

calc() 是 CSS3引入的,讓你在聲明CSS屬性值時(shí)可以執(zhí)行一些計(jì)算.

它可以用在一些數(shù)值場(chǎng)合; 詳細(xì)可以查閱這里MDN

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

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

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

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

這樣完成我們期望的,但是有個(gè)缺點(diǎn)就是每次我們都要去計(jì)算 header、footer 的高度.

這顯然不完美, 假如DOM結(jié)構(gòu)層級(jí)多的話(huà),需要計(jì)算的內(nèi)容更多.

absolute

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

<div class="header">
    頭部
</div>
<div class="main">
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
    <p>中間部分</p>
</div>
<div class="footer">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>底部</div>
</div>
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;
}

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

1 默認(rèn)情況下, 當(dāng)給某個(gè)元素設(shè)置為 position:absolute 時(shí), 在祖先元素沒(méi)有設(shè)置 position: absolute or fixed or relative

時(shí), 其默認(rèn)相對(duì)于初始包含塊( 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對(duì)包含塊介紹, 這段話(huà)大概意思, 根元素(document)為默認(rèn)為初始化包含塊,其初始化塊的大小為視口的大小.

理解這幾個(gè)概念后,我們?cè)賮?lái)看上面的代碼就一目了然了!

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

    body{
        margin-bottom: 50px;
    }
  • position:relative 改變包含塊,讓設(shè)置absolute元素根據(jù)html元素來(lái)進(jìn)行定位.
  • min-height: 保證在內(nèi)容不足視口時(shí), footer能黏貼在底部.
  • margin-bottom 值為 footer 元素的高度,這樣保證內(nèi)容區(qū)域不會(huì)被footer遮住.

Flexbox

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

修改代碼如下:

<div class="container">
    <div class="header">
        頂部
    </div>
    <div class="main">
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
        <p>中間部分</p>
    </div>
    <div class="footer">
        <i class="fa fa-copyright" aria-hidden="true"></i>
        <div>底部</div>
    </div>
</div>
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 都依賴(lài)底部高度為固定.

一般推薦使用 absolute 和 flex 實(shí)現(xiàn)方式; 具體用那種可以根據(jù)具體場(chǎng)景來(lái)使用.

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS Sticky Footer實(shí)現(xiàn)代碼

    這篇文章主要介紹了CSS Sticky Footer實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-05

  • CSS實(shí)現(xiàn)Sticky Footer的示例代碼

    這篇文章主要介紹了CSS實(shí)現(xiàn)Sticky Footer的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-24

  • 詳解CSS經(jīng)典布局之Sticky footer布局

    這篇文章主要介紹了詳解CSS經(jīng)典布局之Sticky footer布局的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-08

  • 詳解Sticky Footer 絕對(duì)底部的兩種套路

    這篇文章主要介紹了詳解Sticky Footer 絕對(duì)底部的兩種套路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-03

  • css sticky footer經(jīng)典布局的實(shí)現(xiàn)

    這篇文章主要介紹了css sticky footer經(jīng)典布局的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)
    2020-03-02

最新評(píng)論