CSS 将页脚刷新到页面底部，twitter bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10099422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flushing footer to bottom of the page, twitter bootstrap
提问by Calvin Cheng
I am generally familiar with the technique of flushing a footer using css.
我通常熟悉使用 css 刷新页脚的技术。
But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.
但是我在让这种方法适用于 Twitter 引导程序时遇到了一些麻烦，很可能是因为 Twitter 引导程序本质上是响应式的。使用 Twitter 引导程序，我无法使用上述博客文章中描述的方法将页脚刷新到页面底部。
回答by sanon
This is now included with Bootstrap 2.2.1.
这现在包含在 Bootstrap 2.2.1 中。
Bootstrap 3.x
引导程序 3.x
Use the navbar component and add .navbar-fixed-bottomclass:
使用导航栏组件并添加.navbar-fixed-bottom类：
<div class="navbar navbar-fixed-bottom"></div>
Bootstrap 4.x
引导程序 4.x
<div class="navbar fixed-bottom"></div>
Don't forget to add body { padding-bottom: 70px; }or otherwise the page content may be covered.
不要忘记添加body { padding-bottom: 70px; }，否则页面内容可能会被覆盖。
Docs: http://getbootstrap.com/components/#navbar-fixed-bottom
回答by Chuan Yeong
Found the snippets hereworks really well for bootstrap
发现这里的片段非常适合引导程序
Html:
网址：
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
CSS：
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
回答by HenryW
A working example for Twitter bootstrap NOT STICKY FOOTER
Twitter 引导程序的一个工作示例NOT STICKY FOOTER
<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>
Version that always updates in case user opens devtools or resizes window.
在用户打开 devtools 或调整窗口大小时始终更新的版本。
<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>
You need at least an element with a #footer
你至少需要一个元素 #footer
When not want the scrollbar if content would fit to screen just change the value of 10 to 0
The scrollbar will show up if content not fits to screen.
如果内容适合屏幕而不需要滚动条，只需将 10 的值更改为 0
如果内容不适合屏幕，滚动条将显示。
回答by Leniel Maccaferri
Here's how to implement this from the official page:
以下是如何从官方页面实现这一点：
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
I just tested it right now and it WORKS GREAT! :)
我现在刚刚测试过它，效果很好！:)
HTML
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
The relevant CSS code is this:
相关的 CSS 代码是这样的：
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
回答by sandeep
For Sticky Footerwe use two DIV'sin the HTML for basic sticky footereffect. Write like this:
对于粘性页脚，我们DIV's在 HTML 中使用了两个基本的粘性页脚效果。像这样写：
HTML
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
回答by user
Much simpler official example: http://getbootstrap.com/examples/sticky-footer-navbar/
更简单的官方示例：http: //getbootstrap.com/examples/sticky-footer-navbar/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
回答by Maxim Shoustin
Well I found mix of navbar-innerand navbar-fixed-bottom
好吧，我发现了navbar-inner和的 混合navbar-fixed-bottom
<div id="footer">
<div class="navbar navbar-inner navbar-fixed-bottom">
<p class="muted credit"><center>ver 1.0.1</center></p>
</div>
</div>
It seems good and works for me
看起来不错，对我有用
See example in Fiddle
参见示例 Fiddle
回答by Mohamed Ali JAMAOUI
In the latest versionof bootstrap 4.3, this can be done using .fixed-bottomclass.
在最新版本的 bootstrap 4.3 中，这可以使用.fixed-bottomclass来完成。
<div class="fixed-bottom"></div>
Here's how I use it with the footer:
这是我如何将它与页脚一起使用：
<footer class="footer fixed-bottom container">
<hr>
<p>© 2017 Company, Inc.</p>
</footer>
You can find more information in the positiondocumentation here.
您可以在此处的职位文档中找到更多信息。
回答by Cory
HenryW's answeris good, though I needed a few tweaks to get it working how I wanted. In particular the following also handles:
HenryW 的回答很好，尽管我需要进行一些调整才能让它按我想要的方式工作。特别是以下还处理：
- Avoiding the "jumpiness" on page load by first marking invisible and setting visible in javascript
- Dealing with browser resizes gracefully
- Additionally setting the footer back up the page if the browser gets smaller and the footer becomes bigger than the page
- Height function tweaks
- 通过首先在javascript中标记不可见并设置可见来避免页面加载时的“跳跃”
- 优雅地处理浏览器大小调整
- 如果浏览器变小并且页脚变得比页面大，则另外设置页脚备份页面
- 高度功能调整
Here's what worked for me with those tweaks:
这些调整对我有用：
HTML:
HTML：
<div id="footer" class="invisible">My sweet footer</div>
CSS:
CSS：
#footer {
padding-bottom: 30px;
}
JavaScript:
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;
});
回答by sp_omer
This worked for me perfectly.
这对我来说非常有效。
Add this class navbar-fixed-bottom to your footer.
将此类 navbar-fixed-bottom 添加到您的页脚。
<div class="footer navbar-fixed-bottom">
I used it like this:
我是这样用的：
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
And it sets to bottom over the the full width.
它在整个宽度上设置为底部。
Edit: This will set footer to always visible, it's something you need to take in consideration.
编辑：这会将页脚设置为始终可见，这是您需要考虑的事情。
