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

資訊專欄INFORMATION COLUMN

CSS Sticky Footer

wemall / 3334人閱讀

摘要：這樣下來我們就可以測試代碼了，然后發(fā)現(xiàn)如果內(nèi)容多到一定程度之后小叉雖然被擠出屏幕外了，但是卻擋在了文字前面，所以我們這里在里面的內(nèi)容器加上了一個(gè)這樣文字就不會(huì)再被擋住了。

最近碰巧再看網(wǎng)上那一套火的不得了的高仿餓了么的視頻，正巧看到一個(gè)css技巧，看了一下覺得挺簡單，但是卻又非常精髓，而平時(shí)公司項(xiàng)目和自己練手的項(xiàng)目里面都沒有這樣的需求，在這里就簡單的講述一下這個(gè)技巧（你就當(dāng)我在這里做個(gè)筆記行不行）。

什么是 sticky footer





我們看到上圖，就是我們需要在實(shí)現(xiàn)一個(gè)小叉一直停留在頁面底部，當(dāng)頁面內(nèi)容少于一屏的時(shí)候，這個(gè)小叉會(huì)被停留在頁面底部，當(dāng)頁面內(nèi)容大于一屏的時(shí)候可以吧這個(gè)小叉擠下去，而不至于讓小叉被停留在頁面底部而遮擋住內(nèi)容，所以在這種地方使用fixed顯然并沒有那么合適。

下面我們就開始一起實(shí)現(xiàn)這個(gè)功能

首先是布局


      

            

            

        

        

            X

其中wrapper為整個(gè)初始容器，wrapper-main-content為文字放置容器，下面是css

      *{
            padding:0;
            margin: 0;
        }
        html,body,.wrapper{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .wrapper-main{
            width: 900px;
            margin: auto;
            min-height: 100%;
        }
        .wrapper-main .wrapper-main-content{
            padding: 0 0 50px 0;
        }
        .wrapper-close{
            width: 900px;
            margin: -50px auto 0;
            text-align: center;
            line-height: 50px;
        }

將跟小X同級(jí)的wrapper-main設(shè)置min-height:100%;這樣就可以讓容器滿屏，但是這樣一來wrapper-close就會(huì)被擠出屏外，所以這里我們使用了margin-top: -50px通過margin負(fù)值來實(shí)現(xiàn)向上偏移正好可以被填充到整個(gè)wrapper-main的底部，而wrapper-main高度又是100%，所以正好來到了屏幕的底部。

這樣下來我們就可以測試代碼了，然后發(fā)現(xiàn)如果內(nèi)容多到一定程度之后小叉雖然被擠出屏幕外了，但是卻擋在了文字前面，所以我們這里在main里面的內(nèi)容器加上了一個(gè)padding-bottom：50px;這樣文字就不會(huì)再被擋住了。這里的關(guān)鍵是margin負(fù)值起到了向上偏移的作用，具體原理請(qǐng)移步相關(guān)margin負(fù)值教學(xué)，這里不再贅述。

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

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

相關(guān)文章

  • css中底部sticky footer

    摘要：設(shè)計(jì)是最古老和最常見的效果之一，它可以概括如下如果頁面內(nèi)容不夠長的時(shí)候，頁腳塊粘貼在視窗底部如果內(nèi)容足夠長時(shí)，頁腳塊會(huì)被內(nèi)容向下推送。所有內(nèi)容區(qū)好，方法一也比較推薦，以上就是個(gè)人對(duì)的理解 Sticky footers設(shè)計(jì)是最古老和最常見的效果之一，它可以概括如下： 1 如果頁面內(nèi)容不夠長的時(shí)候，頁腳塊粘貼在視窗底部； 2 如果內(nèi)容足夠長時(shí)，頁腳塊會(huì)被內(nèi)容向下推送。 出現(xiàn)問題如圖：sho...

    wenzi 評(píng)論0 收藏0

  • 8個(gè)有用的 CSS 技巧:視差圖像，sticky footer 等等

    摘要：在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學(xué)習(xí)過程中的關(guān)鍵進(jìn)展。當(dāng)用戶將鼠標(biāo)懸停在上面時(shí)，圖像會(huì)稍微放大，但其尺寸保持不變。為了達(dá)到這個(gè)效果，需要用標(biāo)簽包裹標(biāo)簽。的范圍是從到，其中從白色變?yōu)楹谏? CSS是一種獨(dú)特的語言。乍一看，這似乎很簡單,但是，某些在理論上看起來很簡單的效果在實(shí)踐中往往不那么明顯。 在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學(xué)習(xí)CSS過程中...

    Godtoy 評(píng)論0 收藏0

  • 8個(gè)有用的 CSS 技巧:視差圖像，sticky footer 等等

    摘要：在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學(xué)習(xí)過程中的關(guān)鍵進(jìn)展。當(dāng)用戶將鼠標(biāo)懸停在上面時(shí)，圖像會(huì)稍微放大，但其尺寸保持不變。為了達(dá)到這個(gè)效果，需要用標(biāo)簽包裹標(biāo)簽。的范圍是從到，其中從白色變?yōu)楹谏? CSS是一種獨(dú)特的語言。乍一看，這似乎很簡單,但是，某些在理論上看起來很簡單的效果在實(shí)踐中往往不那么明顯。 在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學(xué)習(xí)CSS過程中...

    Rango 評(píng)論0 收藏0

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

    摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會(huì)保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn)，而且像上面計(jì)算或添加額外的元素。 CSS實(shí)現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時(shí)，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時(shí)，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...

    張漢慶 評(píng)論0 收藏0

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

    摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會(huì)保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn)，而且像上面計(jì)算或添加額外的元素。 CSS實(shí)現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時(shí)，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時(shí)，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...

    PrototypeZ 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<