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

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

  發(fā)布時(shí)間：2018-12-05 15:32:57   作者：GXQ喬i   我要評(píng)論
這篇文章主要介紹了CSS Sticky Footer實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了CSS Sticky Footer實(shí)現(xiàn)代碼，分享給大家，具體如下：

上圖所顯示的效果就是sticky Footer，當(dāng)頁(yè)面主題內(nèi)容不夠長(zhǎng)時(shí)，footer定位在窗口的底部，當(dāng)頁(yè)面主題內(nèi)容超出窗口后，footer顯示在頁(yè)面的最底部

以下給出幾種實(shí)現(xiàn)方案：

1. FlexBox布局

HTML結(jié)構(gòu)如下：

<body>

    <div class="header">Sticky Footer</div>

    <div class="content">

        <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

        <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

        <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

        <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

        <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

        <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

主要CSS如下：

body{

    display: flex;

    flex-flow: column;

    min-height: 100vh;

}

.content{

    flex: 1;

}

FlexBox實(shí)現(xiàn)就是這么簡(jiǎn)單，實(shí)現(xiàn)效果也貼上來(lái)

貼圖的效果好像不太好，但是效果是實(shí)現(xiàn)了的哦?。。。?/p>

2. 經(jīng)典套路：padding-bottom + margin-top

HTML結(jié)構(gòu)如下：

<body>

    <div class="wrapper clearfix">

        <div class="title">Sticky Footer</div>

        <div class="content">

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

主要CSS如下：

.wrapper{

    min-height: 100vh;

}

.content{

    padding-bottom: 50px;

}

.footer{

    height: 50px;

    margin-top: -50px;

}

實(shí)現(xiàn)效果（感覺(jué)需要裝個(gè)錄屏軟件了）：

 

 

使用此方案時(shí)要注意以下幾點(diǎn)：

1. wrapper的最小高度要等于窗口高度

2. content的padding-bottom、footer的margin-top和height這三個(gè)屬性值的絕對(duì)值需保持一致（因?yàn)閙argin-top為負(fù)值，所以說(shuō)絕對(duì)值）；保持一致的原因是更好的實(shí)現(xiàn)sticky footer，雖然height什么的偏小也能實(shí)現(xiàn)sticky footer效果，但是給最底部留下了空隙。

3. 這種方案的兼容性不錯(cuò)，各大主流瀏覽器均可，emmmmm，還不錯(cuò)

4. 當(dāng)主體使用懸浮布局的時(shí)候，那么就需要考慮一個(gè)兼容性問(wèn)題，這里使用的重點(diǎn)是為了Google chrome

上述第四條兼容性解決方案：

給.wrapper加上著名的clearfix hack：

.clearfix{

    display: inline-block

}

.clearfix:after{

    display: block

    content: "."

    height: 0

    line-height: 0

    clear: both

    visibility: hidden

}

3. 固定高度的解決方案

HTML結(jié)構(gòu)如下：

<body>

    <div class="wrapper">

        <div class="header">Sticky Footer</div>

        <div class="content">

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

            <p>測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

主要CSS樣式如下：

.wrapper{

    min-height: calc(100vh - 50px);

    box-sizing: border-box;

}

注：50px為footer的高度，calc()運(yùn)算符前后都需要保留一個(gè)空格。

結(jié)果我就不貼了，大家自行腦補(bǔ)，跟上面的都差不多。。。

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

相關(guān)文章

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

    這篇文章主要介紹了CSS Sticky Footer 幾種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2019-06-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)論