写在最前:Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站因为内容太短经常版权页脚前移,移动端特定布局也须要Sticky Footer来解决这些问题。css
已知底部高度,利用绝对定位和padding完美兼容
https://codepen.io/qietuniu/pen/KYxMwvhtml
DOM节点git
<div class="container"> <div class="header"></div> <div class="section"> </div> <div class="footer">Copyright© 1994-2019 切图妞</div> </div>
样式代码github
html, body { height: 100%; } .container { position: relative; min-height: 100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ } .section { padding-bottom: 60px; } .footer { position: absolute; width: 100%; height: 60px; bottom: 0px; }
已知底部高度,利用padding-bottom和margin-top完美兼容
https://codepen.io/qietuniu/pen/dLqpdR布局
DOM节点flex
<div class="container"> <div class="header"></div> <div class="section"> </div> </div> <div class="footer">Copyright© 1994-2019 切图妞</div>
样式代码网站
html, body { height: 100%; } .container { min-height: 100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ } .section { padding-bottom: 60px; } .footer { position: relative; margin-top: -60px; width: 100%; height: 60px; }
已知底部高度,新增块级元素填补页脚遮挡,实现完美兼容
https://codepen.io/qietuniu/pen/dLqpezspa
DOM节点code
<div class="container"> <div class="header"></div> <div class="section"> </div> <div class="placeholder"></div> </div> <div class="footer">Copyright© 1994-2019 切图妞</div>
样式代码htm
html, body { height: 100%; } .container { min-height: 100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ margin-bottom: -60px; } .placeholder, .footer { height: 60px; }
底部不定高度,利用表格属性实现完美兼容
https://codepen.io/qietuniu/pen/QPVKVR
DOM节点
<div class="container"> <div class="header"></div> <div class="section"> </div> <div class="footer">Copyright© 1994-2019 切图妞</div> </div>
样式代码
html, body { height: 100%; } .container { display: table; width: 100%; min-height: 100%; } .section { display: table-row; height: 100%; }
vh存在兼容有限,通常在移动端使用。100vh可代替body和html的100%来拿到视口高度实现效果
https://codepen.io/qietuniu/pen/NmLRmV
DOM节点
<div class="container"> <div class="header"></div> <div class="section"> </div> </div> <div class="footer">Copyright© 1994-2019 切图妞</div>
样式代码
.container { min-height: calc(100vh - 60px); } .footer { height: 60px; }
底部不定高度,利用flex弹性布局实现效果,兼容性有限建议移动端使用
https://codepen.io/qietuniu/pen/EJeNYW
DOM节点
<div class="container"> <div class="header"></div> <div class="section"> </div> <div class="footer">Copyright© 1994-2019 切图妞</div> </div>
样式代码
.container { display: flex; flex-flow: column; min-height: 100vh; } .section { flex: 1 }
底部不定高度,利用Grid网格实现效果,兼容性有限建议移动端使用
https://codepen.io/qietuniu/pen/EJeNYW
DOM节点
<div class="container"> <div class="header"></div> <div class="section"> </div> <div class="footer">Copyright© 1994-2019 切图妞</div> </div>
样式代码
.container { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; }
以上方法各有优劣,根据使用场景选择合适的方案
场景 | 方案 |
---|---|
兼容性要求高 | ①②③ |
底部不固定高度 | ④⑥⑤⑦ |
PC端建议 | ①② |
移动端建议 | ①②⑥ |
尊重原创,如需转载请注明出处!