Question

这是我的jsFiddle，其中包含完整的代码示例。

我正在尝试实施sticky footer。正如您所看到的，我的签到形式很短。尽管如此，页脚应该一直固定在页面底部。我试过了：

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

但这不起作用。知道我可以添加什么样的JS / CSS来修复我的粘性？

Answer 1

<强> CSS

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

<强> JS

(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>

Answer 2

这是一个纯粹的CSS＆amp; HTML。没有任何JS。

<html>
<head>
<style>
html, body{
    height:100%;
}
body{
    margin-top: 30px;
}
.header{
    background: #e5e5e5;
}
.wrap{
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 auto -60px;
    background: #ccc;
}
.push{
    height:60px;
}
.footer{
    height:100%;
    width:100%;
    height:auto;
    background: #eee;
}
</style>
</head>
<body>
    <header class="header"><h1>Fluid Height Sticky footer simple - IE8+ (no hacks )</h1></header>
    <div class="wrap">
    <p class="content">Content</p>
    </div>
    <div class="push"></div>
    <footer class="footer"><p>Sticky footer</p></footer>
</body>
</html>

Bootstrap 3：粘性页脚不那么粘

2 个答案: