前端小技巧之footer固定

想滚就滚、不想滚就不滚的footer

今天纪录的是前端开发的 一个小tip，没有太高的技术含量，但是开发过程中时常遇见。

Requirement:
实现两种footer
1、一直固定在底部，无论页面长短，始终能看见的footer，称其为不想滚的footer。
2、同样固定在底部，在页面较长的时候，需要滚动到页面结尾才能看见的footer，称其为想滚的footer。

Implementation：

• 不想滚的footer
  html:
  
  
  

  
  

  
  

  
  

  
  
  
  css:
  .container {position: relative;}
  .main-content {
  height: 1200px;
  padding-bottom: 70px;
  //一定要给footer留位置，否则会出现内容被footer遮盖的现象
  }
  footer {
  height: 70px;
  background-color: #4d4d4d;
  left: 0;
  bottom: 0;
  width: 100%;
  position: fixed; //这个是关键哦！
  }
  效果：
  
  

  Paste_Image.png
  
  1、此时主要内容.main-content的长度为1200px，footer还依然显示在界面上，效果图右侧的滚动条为证。
  2、原理即是footer相对其父元素.container的位置为固定的，通过设置bottom和left固定。

---

• 想滚的footer
  html:
  
  

  
  

  
  

  
  

  
  

  
  
  
  css:
  html, body { height: 100%; //关键1}
  .main-container { min-height: 100%; //关键2 position: relative;}
  .main-content { height: 1200px; padding-bottom: 70px; //关键3}
  footer {
  height: 70px;
  background-color: #4d4d4d;
  width: 100%;
  position: absolute; //关键4
  bottom: 0;
  }
  效果：
  
  
  

  Paste_Image.png
  
  

  关键1：一定要设置html和body的高度为100%，保证内容不足的时候撑开页面，保证footer在底部。
  关键2：不要设置根div的class为container。因为container包含了很多html原生的样式，需要自己做调整。并且一定要设置根div的最小高度为100%，原因和关键1一样。
  关键3：一定要设置主内容的padding-bottom为footer的高度，避免在页面最底部出现footer遮盖主内容的现象。
  关键4：设置footer相对于父div为绝对位置。

看到自己的文章被推荐到首页还是有点小兴奋的。我会继续努力的！
(｡・`ω´･)