亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS Sticky Footer

wemall / 3479人閱讀

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

最近碰巧再看網(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è)小叉會被停留在頁面底部，當(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同級的wrapper-main設(shè)置min-height:100%;這樣就可以讓容器滿屏，但是這樣一來wrapper-close就會被擠出屏外，所以這里我們使用了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;這樣文字就不會再被擋住了。這里的關(guān)鍵是margin負(fù)值起到了向上偏移的作用，具體原理請移步相關(guān)margin負(fù)值教學(xué)，這里不再贅述。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116500.html

相關(guān)文章

  • css中底部sticky footer

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

    wenzi 評論0 收藏0

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

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

    Godtoy 評論0 收藏0

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

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

    Rango 評論0 收藏0

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

    摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實(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)...

    張漢慶 評論0 收藏0

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

    摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實(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 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<