CSS Sticky Footer

wemall 發布于2019-08-30 15:52 / 3321人閱讀

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

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

什么是 sticky footer

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

下面我們就開始一起實現這個功能

首先是布局

其中wrapper為整個初始容器，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設置min-height:100%;這樣就可以讓容器滿屏，但是這樣一來wrapper-close就會被擠出屏外，所以這里我們使用了margin-top: -50px通過margin負值來實現向上偏移正好可以被填充到整個wrapper-main的底部，而wrapper-main高度又是100%，所以正好來到了屏幕的底部。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116500.html

css中底部sticky footer

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

wenzi 2019-08-29 14:11 評論0 收藏0
8個有用的 CSS 技巧:視差圖像，sticky footer 等等

摘要：在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學習過程中的關鍵進展。當用戶將鼠標懸停在上面時，圖像會稍微放大，但其尺寸保持不變。為了達到這個效果，需要用標簽包裹標簽。的范圍是從到，其中從白色變為黑色。 CSS是一種獨特的語言。乍一看，這似乎很簡單,但是，某些在理論上看起來很簡單的效果在實踐中往往不那么明顯。在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學習CSS過程中...

Godtoy 2019-08-23 16:23 評論0 收藏0
8個有用的 CSS 技巧:視差圖像，sticky footer 等等

摘要：在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學習過程中的關鍵進展。當用戶將鼠標懸停在上面時，圖像會稍微放大，但其尺寸保持不變。為了達到這個效果，需要用標簽包裹標簽。的范圍是從到，其中從白色變為黑色。 CSS是一種獨特的語言。乍一看，這似乎很簡單,但是，某些在理論上看起來很簡單的效果在實踐中往往不那么明顯。在本文中，我將分享一些有用的技巧和技巧，它們代表了我在學習CSS過程中...

Rango 2019-08-30 15:43 評論0 收藏0
Sticky Foolter 幾種實現方式

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

張漢慶 2019-08-30 11:03 評論0 收藏0
Sticky Foolter 幾種實現方式

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

PrototypeZ 2019-08-02 15:13 評論0 收藏0