CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lll
lll

Reputation: 315

Bootstrap sticky footer overlapping content

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?

Upvotes: 28

Views: 55375

Answers (6)

Rug
Rug

Reputation: 21

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>

Upvotes: 0

Ursache Stefan
Ursache Stefan

Reputation: 1

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

Upvotes: 0

facktory
facktory

Reputation: 141

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>

Upvotes: 14

Zache
Zache

Reputation: 21

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

.main-footer {
  margin-top: auto;
}

Upvotes: 2

CyberPunkCodes
CyberPunkCodes

Reputation: 3777

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!

Upvotes: 38

frumious
frumious

Reputation: 1575

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!

Upvotes: 13

Related Questions