Bootstrap 粘性页脚重叠内容 [英] Bootstrap sticky footer overlapping content

问题描述

我是 Bootstrap 的新手，我正在尝试将它与 Symfony2 一起使用.我已经有一个用于导航的主顶栏粘性.我的问题是当我尝试添加一个类似的页脚时，它在底部很粘，但它与我的内容重叠.我正在使用 JQuery 脚本来避免顶部导航栏的问题，如下所示:

$(document).ready(function(){$(document.body).css('padding-top', $('#topnavbar').height());$(window).resize(function(){$(document.body).css('padding-top', $('#topnavbar').height());});});

我的主要 Twig 布局的结构是这样的:

 
<div class="container-fluid">

{% 块体 %}{% 结束块 %}<footer class="footer navbar-fixed-bottom"></页脚>

我的 CSS 是原创的.我尝试使用 margin bottom 或 padding bottom 但我的内容(在 {% block body %} 中)的重叠始终存在，我不知道该怎么做做修复它.有人有想法吗?

解决方案

这是一个较旧的主题，没有选择答案.

我正在使用一个新的 Bootstrap 模板，将他当前的主题逐节移植到 Bootstrap :)

我有一个粘性页眉，并且希望页脚在 所有 时间都锁定在底部.我让它工作了，但是当我重新调整它的大小以查看它时，页脚与内容重叠.我需要在内容"和页脚"之间有一个填充/空格，这样它看起来就不会混在一起了.

body 标签上的margin-bottom 不起作用，它在我的页脚下方添加了一个间隙.当您考虑边距在body"标签上的行为时，这才有意义.

正确答案是在 body 标签上使用padding-bottom".我使用了比页脚高度大 6 像素的尺寸来确保较小的填充/间距.

body {填充底部:120px；}.页脚{位置:绝对；左:0；底部:0；宽度:100%；高度:114px；}

你的身高当然会有所不同.希望这会有所帮助！

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:

$(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:

    <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 bottom or padding bottom but 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?

解决方案

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 :)

I have a sticky header, and want the footer locked to the bottom at ALL times. 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.

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.

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: 120px;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 114px;
}

Your heights would be different of course. Hope this helps!

这篇关于Bootstrap 粘性页脚重叠内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！