成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

JerryWangSAP / 1759人閱讀

摘要：使用布局達(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í)候，頁(yè)腳區(qū)塊會(huì)被內(nèi)容向下推送?？梢砸韵聢D展示Sticky footer實(shí)現(xiàn)的效果：

在正常的文檔流中，頁(yè)面內(nèi)容較少的時(shí)候，如果不做處理，頁(yè)腳部分不是固定在視窗底部的。

使用sticky footer布局達(dá)到了預(yù)期的效果，及時(shí)內(nèi)容區(qū)較少，頁(yè)腳區(qū)塊也是固定在底部。

實(shí)現(xiàn)方式
首先構(gòu)建簡(jiǎn)單的布局代碼：

其中content為內(nèi)容區(qū)。方法介紹。
一、為內(nèi)容區(qū)域添加最小高度
這種方法重要用vh(viewpoint height)來(lái)計(jì)算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度。例如我們可以添加如下樣式：

.content {
    min-height: calc(100vh-footer的高度)
}

此方法需要知道footer的高度，如果高度不確定此方法不推薦。content的高度也可以用百分比來(lái)表示。

二、flex布局方式
html代碼：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
}
.content {
    flex: 1; 
}
.footer{
    flex: 0;      
}

這種方法就是利用flex布局對(duì)視窗高度進(jìn)行分割。footer的flex設(shè)為0，這樣footer獲得其固有的高度;content的flex設(shè)為1，這樣它會(huì)充滿除去footer的其他部分。

二、負(fù)margin布局方式實(shí)現(xiàn)
基本構(gòu)架：
html代碼


    

      // 這里是頁(yè)面內(nèi)容

css代碼：

.wrapper {
    min-height: 100%;
}

.wrapper .content{
    padding-bottom: 50px; /* footer區(qū)塊的高度 */
}

.footer {
    position: relative;
    margin-top: -50px;  /* 使footer區(qū)塊正好處于content的padding-bottom位置 */
    height: 50px;
    clear: both;
}

.clearfix::after {
    display: block;
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
}

需要注意的：content元素的padding-bottom與footer元素的高度以及footer元素的margin-top值必須要保持一致。
這種負(fù)margin的布局方式，是兼容性最佳的布局方案，各大瀏覽器均可完美兼容，適合各種場(chǎng)景，但使用這種方式的前提是必須要知道footer元素的高度，且結(jié)構(gòu)相對(duì)較復(fù)雜。

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

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

相關(guān)文章

  • 使用 flex 實(shí)現(xiàn) 5 種常用布局

    摘要：原文鏈接經(jīng)典的上中下布局。左邊是定寬，右邊是上中下布局。還是上中下布局，區(qū)別是固定在頂部，不會(huì)隨著頁(yè)面滾動(dòng)。左側(cè)固定在左側(cè)且與視窗同高，當(dāng)內(nèi)容超出視窗高度時(shí)，在內(nèi)部出現(xiàn)滾動(dòng)條。左右兩側(cè)滾動(dòng)條互相獨(dú)立。 原文鏈接 Sticky Footer 經(jīng)典的上-中-下布局。 當(dāng)頁(yè)面內(nèi)容高度小于可視區(qū)域高度時(shí)，footer 吸附在底部；當(dāng)頁(yè)面內(nèi)容高度大于可視區(qū)域高度時(shí)，footer 被撐開(kāi)排在 co...

    thursday 評(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)戶網(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)戶網(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

  • 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

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

0條評(píng)論

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