我們所見到的大部分網(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)景還是非常廣泛的。
實(shí)現(xiàn)方式負(fù)margin布局方式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)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選