想滚就滚、不想滚就不滚的footer
今天纪录的是前端开发的 一个小tip，没有太高的技术含量，但是开发过程中时常遇见。
Requirement:
实现两种footer
1、一直固定在底部，无论页面长短，始终能看见的footer，称其为不想滚的footer。
2、同样固定在底部，在页面较长的时候，需要滚动到页面结尾才能看见的footer，称其为想滚的footer。
Implementation：
- 不想滚的footer
html:
<div class="container">
<div class="main-content">
</div>
<footer>
</footer>
</div>
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:
<div class="main-container">
<div class="main-content">
</div>
<footer>
</footer>
</div>
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为绝对位置。
看到自己的文章被推荐到首页还是有点小兴奋的。我会继续努力的！
(｡・`ω´･)
