Maison >interface Web >tutoriel HTML >CSS让footer保持在页面底部_html/css_WEB-ITnose
CSS让footer保持在页面底部_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:49:111049parcourir
序：当希望将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
出处：
本文版权归本人和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连
接，否则保留追究法律责任的权利。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Discuz_X3.2_SC_UTF8这是什么东西？_html/css_WEB-ITnoseArticle suivant：HTML的DELETE和PUT应该怎么使用？_html/css_WEB-ITnose