Home > Article > Web Front-end > CSS keeps the footer at the bottom of the page_html/css_WEB-ITnose
CSS keeps the footer at the bottom of the page_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:111026browse
Preface: When you want to keep the footer at the bottom of the page (even if the page content height is lower than the window height), you can try the following method..
<!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>
Author: @zhnoah
Source:
The copyright of this article belongs to myself and the blog park. You are welcome to reprint it, but it must be reproduced without the consent of the author. Keep this statement and provide a link to the original text
in a prominent position on the article page, otherwise we reserve the right to pursue legal liability.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Discuz_X3.2_SC_UTF8 What is this? _html/css_WEB-ITnoseNext article：Discuz_X3.2_SC_UTF8 What is this? _html/css_WEB-ITnose