我从
http://www.cssstickyfooter.com/开始多次实施粘性页脚.唯一的问题是页脚有一个固定的高度.是否有纯CSS解决方案允许页脚根据内部内容增长？
JS解决方案也不错,但CSS最好.
在此先感谢您的帮助.
解决方法
更新的答案
原始答案超过五年,并且未能在页脚高度增加或减少的情况下更新填充.你可以绑定到窗口的resize事件,并在每次激活时调用它,但这会有点过分.
我宁愿鼓励你绑定到window.onresize事件,但要限制逻辑,这样我们就不会计算样式,破坏DOM,并且每秒造成几十次布局：
(function () {
"use strict";
var body = document.querySelector( "body" );
var footer = document.querySelector( "footer" );
window.addEventListener(
// Throttle logic: http://jsfiddle.net/jonathansampson/7b0neb6p/
"resize",throttle( adjustContainerPadding(),500 )
);
function adjustContainerPadding () {
body.style.paddingBottom = window.getComputedStyle( footer ).height;
return adjustContainerPadding;
}
}());
当页面加载时,我们立即触发adjustContainerPadding方法.此方法设置正文的paddingBottom以匹配页脚的计算高度.请注意,window.getComputedStyle方法需要IE9或更高版本.
小提琴：http://jsfiddle.net/jonathansampson/7b0neb6p/
原始答案
我鼓励你(为简单起见)只使用cssstickyfooter代码,并通过javascript设置css值(jQuery代码如下).
$(function(){
var footerHeight = $("#footer").height();
$("#main").css("padding-bottom",footerHeight);
$("#footer").css("margin-top",-footerHeight);
});
代码未经测试,但应该可以正常工作
