Sticky Footer - 完美的绝对底部
如果无法正常显示，请先停止浏览器的去广告插件。
1. Sticky Footer - 完美的绝对底部
NONO
2. Sticky Footer
“Sticky Footer”，指的是一种网页效果，如果页面内容不超一屏的时候，页脚固
定在窗口底部；如果内容过长超过一屏时，页脚会被固定在页面底部。
就是一直处于最底的意思！
3. 应用场景
4. 历史处理
<div class=“wx_wrap"></div>
<div class=“wx_footer”></div>
.wx_wrap {
min-height: 375px;
}
5. 实现方案
6. HTML 结构
.wx_wrap
.wx_footer
<body>
<div class=“wx_wrap"></div>
<div class=“wx_footer"></div>
</body>
7. 方案 1：absolute
html{
height: 100%;
}
body {
position: relative;
min-height: 100%;
box-sizing: border-box;
padding-bottom: 50px;
}
.wx_footer {
position: absolute;
bottom: 0;
height: 50px;
}
8. 方案 2：table
html, body {
height: 100%;
}
body {
display: table;
width: 100%;
min-height: 100%;
}
.wx_wrap {
display: table-row;
height: 100%;
}
9. 方案 3：calc
.wx_wrap {
min-height: calc(100vh - 50px);
}
.wx_footer {
height: 50px;
}
calc：计算值
vh： 相对于视口的高度。视口被均分为 100 单位的 vh
10. 方案 4：flex
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.wx_wrap {
flex: 1;
}
11. 其他方案
当然，还有其他方案，比如 margin、grid 等…，但都不是很好的方案
参考：https://css-tricks.com/couple-takes-sticky-footer/
12. 新增内容所在位置的影响？
13. 处于 .wx_wrap 内
<body>
<div class=“wx_wrap”>
<div class=“wx_box"></div>
</div>
<div class=“wx_footer"></div>
</body>
14. 处于 .wx_wrap 容器外
<body>
<div class=“wx_wrap”></div>
<div class=“wx_box"></div>
<div class=“wx_footer"></div>
</body>
15. 兼容情况
absolute table calc flex
内容少（不超过一屏） 正常 正常 正常 正常
容器内 正常 正常 正常 正常
容器外（不超过一屏） 正常 异常 异常 异常
正常 正常 异常 正常
容器外（超过一屏）
避免 DOM 在主容器外的情况
16. DEMO 演示
http://jdc.jd.com/demo/sticky/sticky.html
17.