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

Question

我已经从 http://www.cssstickyfooter.com/ 多次实现了粘性页脚.唯一的问题是页脚的高度是固定的。有没有纯CSS的方案可以让footer根据里面的内容增长？

JS 解决方案也不错，但 CSS 最好。

在此先感谢您的帮助。

Answer 1

更新的答案

原来的答案已经超过五年了，并且失败了，因为如果页脚高度增加或减少，填充不会更新。您可以绑定(bind)到窗口的 resize 事件，并在每次触发时调用它，但这有点过分了。

我鼓励您绑定(bind)到 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 以匹配 footer 的计算高度。请注意，window.getComputedStyle 方法需要 IE9 或更高版本。

fiddle :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 值。