目标：实现页面页脚效果，即页脚部分在页面内容较少（没有占满全部屏幕）的时候可以处于页面最底部，当页面内容较多的时候则处于正常布局位置。
1. 思路
1. 首先我们得到页脚元素
var $footer = $('#footer');
2. 计算与页脚元素紧邻的上一元素的底端位置
我们计算上一元素的底端位置，并将该值与页脚元素的高度相加，如果这一加和值大于浏览器高度，那么该页脚元素可以处于正常布局位置（如右侧图示）；反之则需要对页脚附加一个 margin-top 以将其放置在页面底端（如左侧图示）。
var $prev = $footer.prev();
// 方法一：用上一元素的顶部坐标加上其高度
var prevBottomPosition = $prev.offset().top + $prev.outerHeight(true);
// 方法二：用页脚元素的顶部坐标减去原有 margin-top 值
var prevBottomPosition = $footer.offset().top - parseInt($footer.css('margin-top'));
3. 计算不添加 margin-top 属性时页脚元素的底端坐标，并与浏览器高度对比从而确定页脚元素的处理情况
// 页脚高度
var footerHeight = $footer.outerHeight();
// 获取不作调整时的 footer 底端坐标
var predictBottomPosition = prevBottomPosition + footerHeight;
// 计算浏览器高度值
var windowHeight = $(window).height();
if(predictBottomPosition < windowHeight){
var offset = windowHeight - prevBottomPosition - footerHeight;
$footer.css('margin-top', offset + 'px');
}
2. 注意
当运行这些代码的时候，会出现页脚元素从原始位置闪到处理后位置的情况，这时我们可以给页脚元素添加样式
visibility:hidden，并在之前的 js 代码后加上$footer.css('visibility', 'visible')即可；实际使用中可能会出现浏览器缩放的问题，这时原本调整好位置的页脚可能会因为页面高度变化而不能显示在正确位置。此时我们可以添加
resize()事件，使得页脚元素能够在浏览器尺寸发生变化时一直处于正确的位置。
3. 总结
我们将以上思路整合，并以 $.fn 的方式给 jQuery 实例加一个扩展，之后就能以 $('#your-footer-id').footer() 的方式使用这一脚本了。
HTML：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0px;">
<div style="width: 100%; height: 100px; background-color: pink;"></div>
<div style="width: 100%; height: 100px; background-color: deepskyblue;" id="js-footer"></div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="footer.js"></script>
<script type="text/javascript">
$('#js-footer').footer();
$(window).resize(function(){
$('#js-footer').footer();
});
</script>
</body>
</html>
footer.js：
(function($){
$.fn.footer = function(){
var $footer = $(this);
$footer.css('visibility', 'hidden');
$footer.css('margin-bottom', 0); // footer 元素不应具有下外边距
// 获取相邻元素
var $prev = $footer.prev();
// 相邻元素的底端坐标( 考虑 margin 值 )
// var prevBottomPosition = $prev.offset().top + $prev.outerHeight(true);
// console.log(prevBottomPosition);
// footer上一相邻元素的顶端坐标( 考虑 margin 值 ), 上一种计算方法也可以
var prevBottomPosition = $footer.offset().top - parseInt($footer.css('margin-top'));
// 计算 footer 的高度值, 这里不考虑外边距, 只考虑内边距和边框
var footerHeight = $footer.outerHeight();
// 获取不作调整时的 footer 底端坐标
var predictBottomPosition = prevBottomPosition + footerHeight;
// 计算浏览器高度值
var windowHeight = $(window).height();
if(predictBottomPosition < windowHeight){
var offset = windowHeight - prevBottomPosition - footerHeight;
$footer.css('margin-top', offset + 'px');
}
$footer.css('visibility', 'visible');
}
})(jQuery);
效果：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。