Sticky footers實現套路

sushi 發布于2019-08-29 11:33 / 3195人閱讀

摘要：第二種方式首先提一個概念相對于視窗的高度視窗高度是。這種需求剛好符合。提供一種增加包裹層實現方式。

無論是pc還是移動端，有一種布局叫做Sticky footers，何為Sticky footers？百度翻譯：“粘粘的頁腳”[笑哭],
不過意思也算對吧，就是如果頁面內容不夠長的時候，頁腳粘貼在視窗底部；如果內容足夠長時，頁腳塊會附在內容區塊下面。那么如何來實現這種效果呢，今天來用兩種方式聊一聊。

實現原理

1.利用包裹層，用高度100%來實現
2.利用flex + 高度100vh來實現

第一種方式

設置body的高度為100%，然后設置設置內容容器的最小高度為100%，然后設置負的margin-bottom，負值為頁腳高度，然后利用偽類，利用容器的after占位。

html,body {
    height: 100%;
}
.page-wrap{
    min-height: 100%;
    margin-bottom: -142px;
}
.page-wrap:after {
    content: "";
    display: block;
}
footer,.page-wrap:after {
    height: 142px;
}
----------------------------------

第二種方式

首先提一個概念：vh ：相對于視窗的高度：視窗高度是100vh。
將body設置為 display:flex; 這時你會發現頁面的布局變成了橫向布局，因為flex布局默認主軸方向為 row ，即橫向。然后利用 flex-flow: column; 將主軸方向設置為垂直方向。關于flex的語法，推薦阮一峰老師的blogFlex 布局教程：語法篇,
然后設置內容容器flex: 1。

這里稍微介紹一下flex: 1
flex: 1 等同于 flex: 1 1 0%,即等價于flex-grow: 1; flex-shrink: 1;flex-basis: 0%;前兩個根據阮老師的教程很好理解，那么第三個flex-basis: 0%是什么意思呢？
flex-basis有三種取值情況：

1.auto: 先檢索該元素的尺寸，如果不為auto，則取固定值；如果也是auto，則取值content
2.content: 指該元素的內容自動布局。
3.百分比: 根據其父容器的尺寸計算。如果父容器的尺寸未定義，則取值和設為auto相同。

所以，設置為 flex: 1 之后，內容容器內容高度小于父容器時，則取父容器高度，如果大于父容器高度時則取內容高度。

理解了上面這些之后，下面是實現的一個簡單例子。

body{
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
-----------

移動端實現

在開發移動端時，可能會有點擊某個按鈕，顯示全屏遮罩層，如果內容過多，則出現滾動條，關閉按鈕在最下面。這種需求剛好符合Stciky footers。遮罩層，我們一般常使用fix布局。提供一種增加包裹層實現方式。
遮罩層position:fixed，然后包裹層最小高度設為min-height: 100%，內容容器設置padding-bottom: 30px頁腳提供位置。頁腳采用margin-top: -30px來定位，同時注意清除浮動的使用。

.parent {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.main-wrapper {
    width: 100%;
    min-height: 100%;
}
.main {
    padding-bottom: 30px;
}
.footer    {
    height: 30px;
    width: 100%;
    position: relative;
    margin-top: -30px;
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
-------------------

    
        
            123
        
    
    
        123

有更多實現技巧或建議，歡迎留言交流~
博客原文:(http://fehey.com/2016/11/20/s...

GPU云服務器云服務器 Sticky CSS Sticky sticky定位套路

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

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

css中底部sticky footer

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

wenzi 2019-08-29 14:11 評論0 收藏0
前端經典布局：Sticky footer 布局

摘要：使用布局達到了預期的效果，及時內容區較少，頁腳區塊也是固定在底部。二布局方式代碼這種方法就是利用布局對視窗高度進行分割。什么是Sticky footer布局？前端開發中大部分網站，都會把一個頁面分為頭部區塊、內容區塊、頁腳區塊，這也是比較。往往底部都要求能固定在屏幕的底部，而非隨著文檔流排布。要實現的樣式可以概括如下：如果頁面內容不夠長的時候，頁腳區塊在屏幕的底部；如果內容足夠長的時...

JerryWangSAP 2019-08-02 10:35 評論0 收藏0
前端必懂之Sticky Footer(粘性頁腳)

摘要：寫在最前是的一種布局場景。頁腳永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站由于內容過短常常版權頁腳前移，移動端特定布局也需要來解決這些問題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫在最前：Sticky Footer是css的一種布局場景。頁腳foot...

piapia 2019-08-02 16:14 評論0 收藏0
前端必懂之Sticky Footer(粘性頁腳)

摘要：寫在最前是的一種布局場景。頁腳永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站由于內容過短常常版權頁腳前移，移動端特定布局也需要來解決這些問題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫在最前：Sticky Footer是css的一種布局場景。頁腳foot...

jifei 2019-08-29 18:42 評論0 收藏0