概述：Css Sticky Footer
如果頁面內容不夠長的時候，頁尾塊粘貼在視窗底部；如果內容足夠長時，頁尾塊會被內容向下推送。
實現方法：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Css Sticky Footer</title> <style>*{padding:0; margin:0}html,body{height:100%;}.wrapper{min-height:100%; height:100%; width: 100%;}.header{width:100%; height:100px;background-color:#999; }.main{padding-bottom:100px;}p{ height:800px; width:100%; background-color:green;}.footer{ position: relative;width:100%; height:100px; clear:both; margin:-100px auto 0; background-color:#666;}.clearfix{display:inline-block;}.clearfix:after{display:block;content:'.';height:0;line-height:0;clear:both;visibility:hidden;} </style></head><body><div class="wrapper"><div class="header"></div><div class="main"><p></p></div></div><div class="footer"></div></body></html>總結：
1、可以通過改變p標籤的高度，來查看底部的位置情況
2、main的padding-bottom值和footer的height值、margin-top負值要保持一致
3、wrapper的min-height值為100%，
4、html和body的height值為100%，wrapper繼承父元素body的height
5、clearfix是清除浮動的Hack
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
