重慶分公司
重慶分公司
CSS中怎么實(shí)現(xiàn)StickyFooter
這篇文章主要介紹了CSS中怎么實(shí)現(xiàn)Sticky Footer，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司專注于辰溪網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供辰溪營銷型網(wǎng)站建設(shè)，辰溪網(wǎng)站制作、辰溪網(wǎng)頁設(shè)計(jì)、辰溪網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造辰溪網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供辰溪網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
本文介紹了CSS Sticky Footer實(shí)現(xiàn)代碼，分享給大家，具體如下：
上圖所顯示的效果就是sticky Footer，當(dāng)頁面主題內(nèi)容不夠長時(shí)，footer定位在窗口的底部，當(dāng)頁面主題內(nèi)容超出窗口后，footer顯示在頁面的最底部
以下給出幾種實(shí)現(xiàn)方案：
1. FlexBox布局
HTML結(jié)構(gòu)如下：
Sticky Footer
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
This is footer
主要CSS如下：
body{
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content{
flex: 1;
}FlexBox實(shí)現(xiàn)就是這么簡單，實(shí)現(xiàn)效果也貼上來
貼圖的效果好像不太好，但是效果是實(shí)現(xiàn)了的哦?。。。?/p>
2. 經(jīng)典套路：padding-bottom + margin-top
HTML結(jié)構(gòu)如下：
Sticky Footer
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
This is footer
主要CSS如下：
.wrapper{
min-height: 100vh;
}
.content{
padding-bottom: 50px;
}
.footer{
height: 50px;
margin-top: -50px;
}實(shí)現(xiàn)效果（感覺需要裝個(gè)錄屏軟件了）：
使用此方案時(shí)要注意以下幾點(diǎn)：
1. wrapper的最小高度要等于窗口高度
2. content的padding-bottom、footer的margin-top和height這三個(gè)屬性值的絕對值需保持一致（因?yàn)閙argin-top為負(fù)值，所以說絕對值）；保持一致的原因是更好的實(shí)現(xiàn)sticky footer，雖然height什么的偏小也能實(shí)現(xiàn)sticky footer效果，但是給最底部留下了空隙。
3. 這種方案的兼容性不錯(cuò)，各大主流瀏覽器均可，emmmmm，還不錯(cuò)
4. 當(dāng)主體使用懸浮布局的時(shí)候，那么就需要考慮一個(gè)兼容性問題，這里使用的重點(diǎn)是為了Google chrome
上述第四條兼容性解決方案：
給.wrapper加上著名的clearfix hack：
.clearfix{
display: inline-block
}
.clearfix:after{
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden
}3. 固定高度的解決方案
HTML結(jié)構(gòu)如下：
Sticky Footer
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
This is footer
主要CSS樣式如下：
.wrapper{
min-height: calc(100vh - 50px);
box-sizing: border-box;
}注：50px為footer的高度，calc()運(yùn)算符前后都需要保留一個(gè)空格。
結(jié)果我就不貼了，大家自行腦補(bǔ)，跟上面的都差不多。。。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS中怎么實(shí)現(xiàn)Sticky Footer”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
網(wǎng)頁標(biāo)題：CSS中怎么實(shí)現(xiàn)StickyFooter
文章URL：http://weahome.cn/article/pgsdje.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
