Sticky Footer绝对底部的实现

Sticky Footer绝对底部的实现

  介绍一下如何用实现Sticky Footer绝对底部。

  目录：

---

问题

  有时候，我们在移动端想实现这样的一个效果：当页面的内容不够多的时候，我们希望底部的部件一直能位于窗口的底部，当页面内容足够多的时候，底部的部件能被内容挤下去，不会和正文内容重叠覆盖。这就是Sticky Footer绝对底部。

---

解决方案

<div id="content">content</div>
<div id="footer">footer</div>

假设我们一开始的布局时这样的，内容部分和底部部分，那么为了实现绝对底部，我们首先需要在内容部分加一层 div ，就像这样：

div id="wrap">
    <div id="content">content</div>
</div>
<div id="footer">footer</div>

然后给他们加上实现绝对底部的样式：

html,body {
  height: 100%;
}

body > #wrap {
    height: auto; 
    min-height: 100%;
}

#content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 50px;
}

#footer {
  position: relative;
  width: 100%;
  height: 50px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -50px;
  clear:both;
}

形成如下所示的布局：
  

需要注意的是，现在 wrap 和 footer 是同一级的。
其实原理很简单，我们给内容区域设置 min-height: 100%，将 footer 挤到屏幕下方，然后给 footer 添加 margin-top，其值为 footer 高度的负值，就能让 footer 又回到屏幕底部！
这样，就实现了Sticky Footer绝对底部。

---

效果展示

（body背景色为灰色，content背景色为黄色，底部背景色为绿色）
一开始，内容区域内容偏少的时候:
  
我们可以看到一个关闭按钮还是在底部的。
然后当内容足够多的时候：
  
我们可以看到，底部的关闭按钮已经被挤下去了！
我们把滚动条滚下看看：
  
这时候，我们就可以看到底部的关闭按钮了。

---

另一种更加简单的解决方案 （CSS3）

上面的方法的确有点麻烦，其实我们可以通过 CSS3 的 calc（） 函数来实现绝对底部。

//html代码
<div id="content">content</div>
<div id="footer">footer</div>

//css代码
#content {
    min-height: calc(100% - 50px);
    /* 减去的高度为footer的高度 */
}  
#footer {
    height: 50px;
}

我们可以看看它的布局方式：
  
就是这么简单，我们使用 CSS3 的 calc（） 函数，我们把内容区域的最小高度（min-height）设置为100%减去底部 footer 的高度，显而易见，这样当内容部分不够多的时候，它的高度为最小高度，加上底部部分就刚好是屏幕的总高度了！这样就实现了 Sticky Footer 绝对底部效果。
当然，值得注意的是，因为 calc（） 是CSS3的一个新增功能，所以在浏览器的兼容性上可能会有问题。

CSS3 的 calc() 函数允许我们在写CSS代码的时候通过计算来决定一个 CSS 属性的值。（关于 CSS3 的 calc() 函数的知识可以看看这里）。