Home > Web Front-end > HTML Tutorial > 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

WBOY
Release: 2016-06-24 11:49:11
Original
1065 people have browsed it

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>
Copy after login

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.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template