我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
根据Bootstrap 4.3的例子，如果你像我一样失去理智，这是它实际工作的方式:
footer div的所有父div都需要有高度:100% (h-100类) 页脚的直接父类需要有display: flex (d-flex类) 页脚需要有margin-top: auto (mt-auto类)
问题在于，在现代前端框架中，我们经常对这些元素进行额外的包装。
例如，在我的案例中，使用Angular，我用一个独立的应用根组件、应用主组件和页脚组件组成了视图——所有这些组件都将它们的自定义元素添加到DOM中。
因此，为了使它工作，我必须向这些包装器元素添加类:一个额外的h-100，将d-flex向下移动一级，并将mt-auto从页脚向上移动一级(因此实际上它不再在页脚类上，而是在<app-footer>自定义元素上)。
其他回答
一个工作的例子，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 如果内容不适合屏幕，滚动条将显示出来。
这个是最好的!
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
根据Bootstrap 4.3的例子，如果你像我一样失去理智，这是它实际工作的方式:
footer div的所有父div都需要有高度:100% (h-100类) 页脚的直接父类需要有display: flex (d-flex类) 页脚需要有margin-top: auto (mt-auto类)
问题在于，在现代前端框架中，我们经常对这些元素进行额外的包装。
例如，在我的案例中，使用Angular，我用一个独立的应用根组件、应用主组件和页脚组件组成了视图——所有这些组件都将它们的自定义元素添加到DOM中。
因此，为了使它工作，我必须向这些包装器元素添加类:一个额外的h-100，将d-flex向下移动一级，并将mt-auto从页脚向上移动一级(因此实际上它不再在页脚类上，而是在<app-footer>自定义元素上)。
唯一一个对我有用的!：
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
它看起来像高度:100%的“链”被打破在div#main。试着增加高度:100%增加高度，这可能会让你更接近目标。
