下面是使用Flexbox的最新版本Bootstrap(在撰写本文时为4.3)的解决方案。

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

一个代码依赖的例子:https://codepen.io/tillytoby/pen/QPdomR

这现在包含在Bootstrap 2.2.1中。

引导3.倍

使用navbar组件并添加.navbar-fixed-bottom类:

<div class="navbar navbar-fixed-bottom"></div>

引导4.倍

<div class="navbar fixed-bottom"></div>

别忘了添加body {padding-bottom: 70px;}或以其他方式覆盖页面内容。

文档:http://getbootstrap.com/components/ # navbar-fixed-bottom

最简单的技术可能是使用Bootstrap navbar-static-bottom，并将主容器div设置为高度:100vh(新的CSS3视图端口百分比)。这将把页脚冲洗到底部。

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

页脚高度匹配wrap元素的底部缩进的大小。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

一个工作的例子，Twitter引导不是黏脚

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

在用户打开开发工具或调整大小窗口时总是更新的版本。

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

您至少需要一个带有#footer的元素

当不需要滚动条时，如果内容适合屏幕，只需将10的值更改为0 如果内容不适合屏幕，滚动条将显示出来。

HenryW的答案很好，尽管我需要做一些调整才能让它按我想要的方式工作。特别地，下面也处理:

避免“跳跃性”页面加载首先标记不可见和设置在javascript可见 优雅地处理浏览器大小调整 此外，如果浏览器变得更小，页脚变得比页面大，设置页脚备份 高度函数调整

以下是这些调整对我有效的方法:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});