Html Bootstrap 粘性页脚重叠内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26336190/
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
Bootstrap sticky footer overlapping content
提问by lll
I'm new to Bootstrap, and I'm trying to use it with Symfony2. I already have a main topbar sticky which is used for navigation. My problem is when I try to add a similar footer which is sticky at the bottom, but it overlaps my content. I'm using a JQuery script to avoid the problem for the top navbar, like this:
我是 Bootstrap 的新手，我正在尝试将它与 Symfony2 一起使用。我已经有一个用于导航的主顶栏粘性。我的问题是当我尝试添加一个类似的页脚时，它在底部很粘，但它与我的内容重叠。我正在使用 JQuery 脚本来避免顶部导航栏的问题，如下所示：
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height());
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height());
});
});
The structure of my main Twig layout is like this:
我的主要 Twig 布局的结构是这样的：
<div class="navbar navbar-default navbar-fixed-top" id="topnavbar">
<div class="container-fluid">
</div>
</div>
{% block body %}
{% endblock %}
<footer class="footer navbar-fixed-bottom">
</footer>
My CSS is original. I tried with margin bottomor padding bottombut the overlapping of my content (in the {% block body %}) is always present, and I don't know what to do to fix it. Does anyone have an idea?
我的 CSS 是原创的。我尝试使用margin bottom或padding bottom但我的内容（在 {% block body %} 中）的重叠始终存在，我不知道该怎么做才能解决它。有没有人有想法？
回答by Wade
This is an older topic with no answer selected.
这是一个较旧的主题，没有选择答案。
I am on a fresh Bootstrap template, porting his current theme to Bootstrap section by section :)
我在一个新的 Bootstrap 模板上，将他当前的主题逐节移植到 Bootstrap :)
I have a sticky header, and want the footer locked to the bottom at ALLtimes. I had it working, but when I re-sized it to view it responsive, the footer overlapped the content. I needed a padding/space between the "content" and the "footer" so it didn't look mushed together.
我有一个粘头，并希望在锁定到底页脚ALL倍。我让它工作了，但是当我重新调整它的大小以查看它时，页脚与内容重叠。我需要在“内容”和“页脚”之间有一个填充/空间，这样它看起来就不会混在一起了。
margin-bottom on the body tag did not work, it added a gap below my footer. When you think about how a margin behaves on the "body" tag, that only makes sense.
body 标签上的 margin-bottom 不起作用，它在我的页脚下方添加了一个间隙。当您考虑边距在“body”标签上的行为时，这才有意义。
The correct answer is to use "padding-bottom" on the body tag. I used a size 6 pixels larger than the height of my footer to ensure this small padding/spacing.
正确答案是在 body 标签上使用“padding-bottom”。我使用了比页脚高度大 6 像素的尺寸来确保这个小的填充/间距。
body {
padding-bottom: 120px;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 114px;
}
Your heights would be different of course. Hope this helps!
你的身高当然会有所不同。希望这可以帮助！
回答by frumious
As standard, this is expected behaviour for Bootstrap headers and footers - they stick to the top or bottom, and overlap the main content. The solution for footers is to add margin-bottom: [footer height];to the body, as in the customisation example on the Bootstrap site:
作为标准，这是 Bootstrap 页眉和页脚的预期行为 - 它们粘在顶部或底部，并与主要内容重叠。页脚的解决方案是添加margin-bottom: [footer height];到body，如Bootstrap 站点上的自定义示例中所示：
sticky-footer.css
粘性footer.css
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
You mention margin-bottomin your question, so if that doesn't work for you maybe you could post what you actually tried?
您margin-bottom在问题中提到，所以如果这对您不起作用，也许您可以发布您实际尝试过的内容？
P.S. This is probably nothing to do with Symfony!
PS 这可能与Symfony无关！
回答by facktory
There is a new modern flex-box based solution.
有一个新的基于 flex-box 的解决方案。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}<body>
<header>Hey</header>
<main>Here some content</main>
<footer>And a perfect sticky footer without overlapping</footer>
</body>回答by Zache
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-footer {
margin-top: auto;
} 回答by Muhamed Shafeeq
Make float:left
it solved my problem
.footer
{
float:left;
}
使浮动：留下它解决了我的问题
.footer
{
float:left;
}
