<del id="uy8gs"></del>

<fieldset id="uy8gs"></fieldset>

<abbr id="uy8gs"></abbr>

<strike id="uy8gs"></strike>

<abbr id="uy8gs"></abbr>

Sticky footers實現(xiàn)套路

sushi 發(fā)布于2019-08-29 11:33 / 3206人閱讀

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

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

實現(xiàn)原理

1.利用包裹層，用高度100%來實現(xiàn)
2.利用flex + 高度100vh來實現(xiàn)

第一種方式

設(shè)置body的高度為100%，然后設(shè)置設(shè)置內(nèi)容容器的最小高度為100%，然后設(shè)置負的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設(shè)置為 display:flex; 這時你會發(fā)現(xiàn)頁面的布局變成了橫向布局，因為flex布局默認主軸方向為 row ，即橫向。然后利用 flex-flow: column; 將主軸方向設(shè)置為垂直方向。關(guān)于flex的語法，推薦阮一峰老師的blogFlex 布局教程：語法篇,
然后設(shè)置內(nèi)容容器flex: 1。

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

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

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

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

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

移動端實現(xiàn)

在開發(fā)移動端時，可能會有點擊某個按鈕，顯示全屏遮罩層，如果內(nèi)容過多，則出現(xiàn)滾動條，關(guān)閉按鈕在最下面。這種需求剛好符合Stciky footers。遮罩層，我們一般常使用fix布局。提供一種增加包裹層實現(xiàn)方式。
遮罩層position:fixed，然后包裹層最小高度設(shè)為min-height: 100%，內(nèi)容容器設(shè)置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

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