sticky-footer是css中的一個經典問題：
當頁面內容超出屏幕，頁腳模塊會像正常頁面一樣，被推到內容下方，需要拖動滾動條才能看到。
而當頁面內容小于屏幕高度，頁腳模塊會固定在屏幕底部，就像是底邊距為零的固定定位。

html:

<div class="detailWrapper" v-show="detailShow"><div class="sticky-box clearfix"><div class="sticky-content">內容</div></div><div class="sticky-footer"><span class="icon-close" @click="showDetail"></span></div></div>

css:

.detailWrapperposition fixedz-index: 1top 0left 0width 100%height 100%background rgba(7,7,27,0.8)overflow auto.sticky-boxwidth 100%min-height 100%.sticky-contentmargin-top 64pxpadding-bottom 64px.sticky-footermargin -64px auto 0 autowidth 32pxheight 32pxline-height 32pxfont-size 32pxcolor rgba(255,255,255,0.5)cursor pointer

相關介紹文章:
https://www.cnblogs.com/wisewrong/p/6525696.html
https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

總結

以上是生活随笔為你收集整理的sticky-footer实现记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。