標籤：
序：當希望將footer保持在頁面底部（即使頁面內容高度低於視窗高度），可以嘗試下面的方法..
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>CSS讓footer保持在頁面底部</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; /*讓頁面撐滿視窗*/ } .body { min-height: 100%; height: auto !important; height: 100%; /*設定頁面內容地區最小佔滿視窗高度*/ margin: 0 0 -41px; /*利用margin負值留出footer的地區(由於footer設定了1px的border，所以值在原有高度上+1)*/ text-align: center; } footer { height: 40px; line-height: 40px; border-top: 1px solid #ddd; text-align: center; } </style></head><body> <div class="body"> <header>我是頭部</header> <div>我是內容</div> </div> <footer>我是頁尾，我總是固定在頁面底部</footer></body></html>
@zhnoah
出處：http://www.cnblogs.com/zhnoah/
本文著作權歸本人和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連
接，否則保留追究法律責任的權利。
CSS讓footer保持在頁面底部
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
