css - Bootstrap 3:粘性页脚不太粘

这是我的jsFiddle及其完整代码示例。

我正在尝试实现sticky footer。如您所见，我的登录表单很短。但是，页脚应一直固定到页面底部。我试过了：

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background: url(images/footer.jpg) no-repeat;
}

但这是行不通的。知道我可以添加什么确切的JS / CSS来解决粘性问题吗？

最佳答案

的CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

(function ($) {

    var height = $('footer').height();
    //update the  value when page is loaded
    $(document).ready(function () {
    $('body').css({"margin-bottom" : height });

    });

    //update the  value when the browser is resized (useful for devices which switch from portrait to landscape)
    $(window).resize(function () {
    $('body').css({"margin-bottom" : height });
    });

})(jQuery);

的HTML

<body>
    <header>
        .....
    </header>
    <div class="content">
        ......
    </div>
    <footer>
        ......
    </footer>
</body>