码迷,mamicode.com
首页 > Web开发 > 详细

CSS让footer保持在页面底部

时间:2015-02-15 23:04:23      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:

:当希望将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保持在页面底部

标签:

原文地址:http://www.cnblogs.com/zhnoah/p/4293535.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!