Bootstrap sticky footer overlapping content

Question

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?

Answer 1

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!

Answer 2

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:

sticky-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-bottom in your question, so if that doesn't work for you maybe you could post what you actually tried?

P.S. This is probably nothing to do with Symfony!