我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
一个工作的例子，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
<div id="wrapper">
<div id="content">
<!-- navbar and containers here -->
</div>
<div id="footer">
<!-- your footer here -->
</div>
</div>
CSS
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#content {
padding-bottom: 100px; /* Height of the footer element */
}
#footer {
width: 100%;
height: 100px; /* Adjust to the footer needs */
position: absolute;
bottom: 0;
left: 0;
}
这个是最好的!
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
唯一一个对我有用的!：
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
使用Bootstrap 5保持页脚在底部
<div class="min-vh-100 d-flex flex-column
justify-content-between">
<div> <!-- Wrapper (Without footer) -->
<header>
I am a header.
</header>
<article>
I am an article!
</article>
</div> <!-- End: Wrapper (Without footer) -->
<footer>
I am a footer.
</footer>
</div>
在CodePen中的现场演示
Note
请确保您使用以下引导类将所有内容包装在<div>或任何其他块级元素中:min-vh-100, d-flex,flex-column,justify-content-between。 确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。 确保您使用<footer>或任何其他块级元素来包装页脚。
代码的解释
Min-vh-100确保body元素至少延伸到屏幕的全部高度 Flex-column在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。 Justify-content-between将页脚推到屏幕底部。
看看如何做同样的(保持页脚在底部)与CSS -链接
下面是使用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
