27

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?

alexander
  • 1,191
  • 2
  • 20
  • 40
lll
  • 305
  • 1
  • 3
  • 8

6 Answers6

37

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!

Wade
  • 3,757
  • 2
  • 32
  • 51
  • 1
    It is worth noting that a fixed navbar at the top requires a [padding-top](http://getbootstrap.com/components/#navbar-fixed-top) to the body and similarly a fixed footer requires a padding-bottom – S Raghav Apr 15 '17 at 16:01
  • 2
    And how exactly is `position: absolute` supposed to fix the overlapping problem? – busuu Apr 26 '17 at 01:08
  • This padding-bottom made all the difference ! – Frédéric Klee Aug 29 '17 at 07:16
  • 1
    **TL;DR** : `body {padding-bottom: 50px;}` with `50px` being your footer height plus an additional margin (+1) – Boern Jun 19 '18 at 11:07
  • This was the aha moment i had that helped save me hours of trying to adjust. In my case I was using a sticky header and a fixed footer. I switched the header to fixed and added padding to the top/bottom based on size of footer/header. Thank you for your answer. – Jason R May 01 '20 at 00:14
13

There is a new modern flex-box based solution.

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>
facktory
  • 131
  • 1
  • 5
  • 2
    You also need `margin:0` on `body`. Browser default is `8px`. – tao Sep 22 '19 at 11:40
  • Issue is that you have to scroll to see the footer. How would you make the footer fit into the viewport such that the body takes e.g. 90% of the height and the footer takes 10%? – David Aug 08 '21 at 00:58
12

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!

Community
  • 1
  • 1
frumious
  • 1,567
  • 15
  • 25
  • Here is the screen of this result : [link](http://i.imgur.com/0RCYehs.png) I have try a lot of thing like body { margin: 0 0 60px; } or change my jquery script with adding bottom.nav like :$(document.body).css('margin-bottom', $('#botnavbar').height()); (with right id on my footer). But nothing worked so far. – lll Oct 13 '14 at 10:02
  • I think it'll be hard to help without the actual code - the HTML for the page, and the CSS. Is there any particular reason you're using JQuery rather than just making changes directly to CSS? – frumious Oct 13 '14 at 10:27
  • I use it for the responsive i don't know if this help but this work for me . I'm looking for [exemple](http://jeremie.patonnier.net/pages/mentions-legales) this footer but i don't understand why there is always an overlap i'm adding a margin-bottom with like 110 % it work but if i add a content then i need to define an other margin bottom. (The margin bottom works only if i disable the script) – lll Oct 13 '14 at 13:37
1

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-footer {
  margin-top: auto;
}
Zache
  • 11
  • 1
  • 2
    Hi Zache, please try to avoid answering with plain code. Please include explanations to your answer so that the OP can understand why you used it. – Shaheryar.Akram Jul 22 '19 at 11:15
0

Try to set the container-fluid height to auto. I also had this issue and this solution worked in my case.

Pirate
  • 1,167
  • 1
  • 9
  • 19
Ursache Stefan
  • 1
0

Posting here because this is what Google returned when searching how to fix overlapping footer.

With Bootstrap 5 create a sticky footer that doesn't overlap by wrapping the footer in a clearfix tag per the documentation like this:

<div class="clearfix">...</div>

https://getbootstrap.com/docs/5.3/helpers/clearfix/

If you are not sure how to get a footer to stick to the bottom of the page add a flexbox class to your body like this:

<body class="d-flex flex-column vh-100">...</body>

Then add flex-grow-1 to the div/section before the footer in your template. This cause's it's box to fill available space and pushes the footer to the bottom.

<div class="d-flex flex-grow-1">...</div>
Rug
  • 13
  • 4