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

CSS + DIV 让页脚始终底部

时间:2014-09-09 17:41:59      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   使用   ar   strong   

原文地址:http://blog.davidqiu.com/post/2013-06-17/40051753968

解决方法

在解决的时候,我查了相当多的资料。如果用纯 CSS 的话,似乎都指向一种叫 Sticky Footer的方法。不过网上的基本都是抄来抄去,只有代码,没有解释什么的,我就不吐嘈了。

 

原理解析

这种方法的原理很简单,用到了 2 个属性:min-height 和 margin。

其中,min-height 都有个很奇特的属性值:100%。这个属性值是指当前浏览器窗口的高度,实际上就是能显示的最大高度(一个屏幕的高度)了。那么自然可以联想到,如果将内容部分设成“min-height: 100%”,就能够将内容部分占有一个屏幕的高度,那么页脚起码会在屏幕的外面。只要稍加改进,便能融入 Header、Content、Footer 这三个部分,并使得 Footer 起码在屏幕的最底部,而且当内容长度增加时,会在页面的最后面,而不至于遮挡内容。

可是要注意的是,“100%”的这个属性对于“height”或者“min-height”来说有点奇怪,它在使用之前貌似要对“100%”的定义进行初始化。而我们知道,“html”这个结点是沾满一个屏幕的,那么就要先写这样的内容:

1
2
3
4
body, html
{
  height: 100%;
}

 一个值得关注的是,如果我们用的是 ASP.NET 框架,因为它是基于 form 的,所以仅仅设置 body 和 html 还不够,还要设置 form 的相应属性

1
2
3
4
form
{
  height: 100%;
}

 而为了页眉与页脚紧贴浏览器边框,我们还要设置相关的 margin 与 padding 为 0,以防止空隙的出现。而为了简单起见,就对全局所有的容器都设置这样的一个默认值吧。

1
2
3
4
5
*
{
  margin: 0;
  padding: 0;
}

 好了,到了这里就可以放心地去用“min-height: 100%;”了。

那么怎么解决在内容很少的时候,页脚能够显示在浏览器的最底部,而不是什么情况都被置于一个屏幕的高度之外呢?

可能看到上面的第 2 个我说的要使用的属性,大家就大概明白了。对,就是用 margin 这个属性。不过要声明的一点是,下面的方法用到了一些不太符合规范的方法,就是加多了一个空 div 用作显示格式定制,而其本身不起任何作用。

先看看网页的 html 文本来了解一下框架吧:

1
2
3
4
5
6
<div class="Wrapper">
  <div class="Header"></div>
  <div class="Content"></div>
  <div class="FooterPush"></div>
</div>
<div class="Footer"></div>

 可见,页眉与内容都被一个叫“Wrapper”的容器包着,然后在他们后面有个叫“FooterPush”的东西,其实这个就是我之前说的仅用于控制显示格式的空 div 了。然后,Footer 是置于所有内容之外的。

然后我们这样思考:如果 FooterPush 的高度与 Footer 相同,然后 Footer 有一个“margin-top”的属性,它的值是 Footer 的高度的负值,即例如 Footer 的高度是 120px,然后:

1
2
3
4
5
6
7
8
9
10
.Wrapper .FooterPush
{
  height: 120px;
}
                           
.Footer
{
  margin-top: -120px;
  height: 120px;
}

  那么发生的情况将会非常神奇,实际上就是 Footer 刚好就覆盖在 FooterPush 的上面了。那么这个时候,我们只要将 Wrapper 的高度设为“100%”,这样所有的东西就至少能够在一个屏幕内现实完毕了。

这样,就能够达到当内容少时,Footer 最高能够在一个屏幕的最底部显示;而当内容比较长的时候,Footer 能够很乖巧地在所有内容的后面,而不至于遮挡内容。

OK,大工告成了吧!那我就贴个完整些的代码吧。

 完整代码

Html:

1
2
3
4
5
6
7
8
9
10
<body>
<form> <!-- 如果用的是 Asp.Net 就可能会有这个结点 -->
  <div class="Wrapper">
    <div class="Header"></div>
    <div class="Content"></div>
    <div class="FooterPush"></div>
  </div>
  <div class="Footer"></div>
</form>
</body>

 CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*
{
  margin: 0;
  padding: 0;
}
   
html, body, form
{
  height: 100%;
}
   
.Wrapper
{
  min-height: 100%;
}
   
  .Wrapper .FooterPush
  {
    height: 120px; /* Footer 的高度 */
  }
   
.Footer
{
  clear: both; /* 清除浮动元素格式 */
  position: relative;
  margin-top: -120px; /* Footer 高度的负值 */
  height: 120px;
}

 

CSS + DIV 让页脚始终底部

标签:style   blog   http   color   os   io   使用   ar   strong   

原文地址:http://www.cnblogs.com/songmz/p/3962739.html

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