CSS控制页脚始终在底部——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
CSS控制页脚始终在底部

发布作者:萧强   发布时间:2015-11-3   阅读次数:8237

前两天被问到:如何让页脚始终在页面底部的问题。今天花了点时间完美解决,在这里总结一下。

以前的一贯做法

先说说我一起的一贯做法:通过控制内容主体的min-height来撑起页面。由于我之前有看到百度的很多页面也都是页脚显示在中间了,所以我一直以为没有更好的解决方案。于是就图简单用了这个方法。

思考与解决

猜想:利用bottom:0;是否能控制呢?  
测试思考与分析:默认的position属性是relative,用bottom属性相当于没写。

猜想:给相应的标签添加相应的position属性是否可行呢?
测试思考与分析:添加position属性后,会导致页面布局混乱。如果设置position:fixed;那么页脚会始终在浏览器窗口的底部。如果设置position:absolute;在一些情况下回盖住主内容。

具体解决方案与分析

假设我们项目中用了Bootstrap,主要是初始化各个标签的一些属性,比如margin和padding。然后我们通过如下代码为整个页面设置一个高度,这个高度不小于浏览器可视区域高度。

body, html
{
  height: 100%;
}
然后编写页面内容代码如下:

<div class="content">
    <div class="content-header">
      <h1 class="text-center">Header</h1>
    </div>
    <div class="content-body">
      <h1 class="text-center">Content body</h1>
    </div>
    <div class="footer-space"></div>
  </div>
  <div class="footer">
    <h1 class="text-center">Footer</h1>
  </div>

对页面内容的元素设置样式:

.content{min-height:100%;}
 .footer-space{height:450px;}
 .footer{height:450px;margin-top:-450px;}

这里的content最小高度100%即继承了body的最小高度即浏览器可视区域的最小高度。也就是说如果再有内容就会溢出。那么我们就可以通过margin属性让footer向上浮动和footer高度相同的值。这样就不存在溢出情况。但是还是会有问题,当内容多到有滚动条的情况下,footer会覆盖content的一部分内容。所以我们在div.content底部放了一个和footer相同高度的空白div.footer-space,以避免覆盖到正真的内容。

然后我们在添加一些非必要的代码,便于查看和理解,整个测试代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
  html,body{height:100%;}
  .content{min-height:100%;}
  .footer-space{height:450px;}
  .footer{height:450px;margin-top:-450px;}

  /* just for show case */
  body{background: #E0E0E0;}
  .content-header{height:80px;background:#fff;border-bottom:1px solid #dbdbdb;overflow: hidden;}
  .content-body{background:#f8f8f8;overflow: hidden;}
  .content-test{height:800px;width:100%;background:#f2f2f2;}
  .footer{background:#eee;border-top:1px solid #dbdbdb;}
  </style>
</head>
<body>
  <div class="content">
    <div class="content-header">
      <h1 class="text-center">Header</h1>
    </div>
    <div class="content-body">
      <h1 class="text-center">Content body</h1>
	   <div class="content-test"></div>	
    </div>
    <div class="footer-space"></div>
  </div>
  <div class="footer">
    <h1 class="text-center">Footer</h1>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
    $(".content-test").click(function(){
      $(this).hide();
    });
  });
  </script>
</body>
</html>
  希望能对大家有所帮助!!!

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

css hack解决方案

热点文章

新闻资讯

标签云

友情赞助