CSS粘性页脚|没有固定高度的页脚

我从 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);
});

代码未经测试,但应该可以正常工作

无论页脚中有多少内容,都会自动为您重置CSS值.

CSS粘性页脚|没有固定高度的页脚

解决方法

相关文章