需求
有这样一个需求：
- 当页面内容高度小于屏幕高度时，Footer固定在屏幕底部；
- 当页面内容高度大于屏幕高度时，Footer固定在页面底部，即：跟随在内容尾部，滚动条到最底部时看到。
踩过的坑
第1种方案：绝对定位 + padding
body{position : relative;padding-bottom: 60px;
}footer{position : absolute;bottom : 0;width : 100%;height : 60px;
}
复制代码这种方案可以保证footer一直在屏幕底部，当滚动条滚到最底部时，页面内容也不会被footer挡住。
但是问题就是：当在滚动页面的过程中，底部的Footer始终会挡住一部分页面的视线。
第2种方案：js控制footer的定位
var resizeFooter = function(){if(document.body.clientHeight > window.innerHeight){document.querySelector('footer').style.position = 'relative';return;};document.querySelector('footer').style.position = 'absolute'
};//页面加载完成后先计算一下高度，是否出现滚动条。
window.addEventListener('load',function(e){resizeFooter();
});//页面变化之后，重新调整footer
window.addEventListener('resize',function(e){resizeFooter();
});
复制代码这种方案看是没有问题，但是实际上却有一个非常大的坑。
假如系统是SPA单页面应用，那么页面局部内容发生改变以后，就会影响到footer的显示。也就是说，你得考虑所有动态改变页面内容后，都得调用一次 resizeFooter ！
更加严峻的问题是，假如你使用的是MVVM框架，比如：vue，那么你调用 resizeFooter 一定需要在页面数据双向绑定完成之后，也就是页面充分渲染完之后才能调用，也就是 mounted 回调钩子中触发。
如果其他框架没有提供这类回调钩子，你可能就要崩溃了，自己写个 setTimout 延后一段时间执行？更不可靠。
而且这种方式，即便你JS控制的再好，也会在页面上看起来，Footer有个不自然的变化！
完美的解决方案
html {position: relative;min-height: 100%;
}body {margin-bottom: 60px;
}footer {position: absolute;bottom: 0;width: 100%;height: 60px;
}
复制代码只需要以上代码即可，另外需要注意IE10下有个bug，需要HACK一下。
/*!* IE10 viewport hack for Surface/desktop Windows 8 bug* Copyright 2014-2015 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/// See the Getting Started docs for more information:
// http://getbootstrap.com/getting-started/#support-ie10-width(function () {
'use strict';if (navigator.userAgent.match(/IEMobile\/10\.0/)) {var msViewportStyle = document.createElement('style')msViewportStyle.appendChild(document.createTextNode('@-ms-viewport{width:auto!important}'))document.querySelector('head').appendChild(msViewportStyle)}})();
复制代码以上内容参考于Bootstrap示例：Sticky footer
延伸
CSS布局中有一种 “粘性布局”，即：position:sticky，跟我们刚才的footer控制的需求正好相反。
- 我们的需求：当内容高度小于屏幕高度时，footer固定在底部，否则相对内容高度显示；
- 粘性布局的特性：当内容到达粘性阈值前相对内容显示，达到后固定不变。
所以，粘性布局我们无法使用，但是作为学习，恰好跟我们的这个案例相反，还是值得一看的。
想了解这一特性，可以参考学习 position:sticky 语法以及如何爬坑：
- developer.mozilla.org/zh-CN/docs/…
- position: sticky 详解（防坑指南）
- BFC 神奇背后的原理
参考
- How to position a footer/element relative to the bottom of the page?
- Sticky footer