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

資訊專(zhuān)欄INFORMATION COLUMN

Sticky footers實(shí)現(xiàn)套路

sushi / 3271人閱讀

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

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

實(shí)現(xiàn)原理 
1.利用包裹層，用高度100%來(lái)實(shí)現(xiàn)
2.利用flex + 高度100vh來(lái)實(shí)現(xiàn)
第一種方式

設(shè)置body的高度為100%，然后設(shè)置設(shè)置內(nèi)容容器的最小高度為100%，然后設(shè)置負(fù)的margin-bottom，負(fù)值為頁(yè)腳高度，然后利用偽類(lèi)，利用容器的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;
}
----------------------------------
第二種方式

首先提一個(gè)概念：vh ：相對(duì)于視窗的高度：視窗高度是100vh。
將body設(shè)置為 display:flex; 這時(shí)你會(huì)發(fā)現(xiàn)頁(yè)面的布局變成了橫向布局，因?yàn)閒lex布局默認(rèn)主軸方向?yàn)?row ，即橫向。然后利用 flex-flow: column; 將主軸方向設(shè)置為垂直方向。關(guān)于flex的語(yǔ)法，推薦阮一峰老師的blogFlex 布局教程：語(yǔ)法篇,
然后設(shè)置內(nèi)容容器flex: 1。

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

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

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

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

body{
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
-----------
移動(dòng)端實(shí)現(xiàn)

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

.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

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

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

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

相關(guān)文章

  • css中底部sticky footer

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

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

  • 前端經(jīng)典布局：Sticky footer 布局

    摘要：使用布局達(dá)到了預(yù)期的效果，及時(shí)內(nèi)容區(qū)較少，頁(yè)腳區(qū)塊也是固定在底部。二布局方式代碼這種方法就是利用布局對(duì)視窗高度進(jìn)行分割。 什么是Sticky footer布局？前端開(kāi)發(fā)中大部分網(wǎng)站，都會(huì)把一個(gè)頁(yè)面分為頭部區(qū)塊、內(nèi)容區(qū)塊、頁(yè)腳區(qū)塊，這也是比較。往往底部都要求能固定在屏幕的底部，而非隨著文檔流排布。要實(shí)現(xiàn)的樣式可以概括如下：如果頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候，頁(yè)腳區(qū)塊在屏幕的底部；如果內(nèi)容足夠長(zhǎng)的時(shí)...

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

  • 前端必懂之Sticky Footer(粘性頁(yè)腳)

    摘要：寫(xiě)在最前是的一種布局場(chǎng)景。頁(yè)腳永遠(yuǎn)固定在頁(yè)面的底部，頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候頁(yè)腳黏在視窗底部，內(nèi)容足夠長(zhǎng)時(shí)會(huì)被向下移動(dòng)。老式門(mén)戶(hù)網(wǎng)站由于內(nèi)容過(guò)短常常版權(quán)頁(yè)腳前移，移動(dòng)端特定布局也需要來(lái)解決這些問(wèn)題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫(xiě)在最前：Sticky Footer是css的一種布局場(chǎng)景。頁(yè)腳foot...

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

  • 前端必懂之Sticky Footer(粘性頁(yè)腳)

    摘要：寫(xiě)在最前是的一種布局場(chǎng)景。頁(yè)腳永遠(yuǎn)固定在頁(yè)面的底部，頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候頁(yè)腳黏在視窗底部，內(nèi)容足夠長(zhǎng)時(shí)會(huì)被向下移動(dòng)。老式門(mén)戶(hù)網(wǎng)站由于內(nèi)容過(guò)短常常版權(quán)頁(yè)腳前移，移動(dòng)端特定布局也需要來(lái)解決這些問(wèn)題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫(xiě)在最前：Sticky Footer是css的一種布局場(chǎng)景。頁(yè)腳foot...

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

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

0條評(píng)論

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