我們所見到的大部分網(wǎng)站頁(yè)面，都會(huì)把一個(gè)頁(yè)面分為頭部區(qū)塊、內(nèi)容區(qū)塊和頁(yè)腳區(qū)塊，當(dāng)頭部區(qū)塊和內(nèi)容區(qū)塊內(nèi)容較少時(shí)，頁(yè)腳能固定在屏幕的底部，而非隨著文檔流排布。當(dāng)頁(yè)面內(nèi)容較多時(shí)，頁(yè)腳能隨著文檔流自動(dòng)撐開，顯示在頁(yè)面的最底部，這就是Sticky footer布局。

當(dāng)內(nèi)容較少時(shí)，正常的文檔流效果如下圖

在正常的文檔流中，頁(yè)面內(nèi)容較少時(shí)，頁(yè)腳部分不是固定在視窗底部的，這時(shí)就要用到Stickyfooter布局。

Sticky footer布局效果如下圖

這樣就符合我們的預(yù)期效果，可以看出Sticky footer布局的應(yīng)用場(chǎng)景還是非常廣泛的。

html代碼：

 div >
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ù)雜。
flex布局方式
html代碼：
 div >
css代碼：
.wrapper {display: flex;flex-direction: column;min-height: 100vh;}.content {flex: 1;}.footer {flex: 0;}
這種布局方式結(jié)構(gòu)簡(jiǎn)單，代碼量少，也是較為推薦的布局方式。
小結(jié)
Sticky footer布局是十分常見的一種頁(yè)面布局形式，實(shí)現(xiàn)的方法也比較多，以上兩種方法最為常用，且基本可以滿足所有應(yīng)用場(chǎng)景。
以上就是Sticky footer布局是什么？的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。