Search code examples
htmlcsstwitter-bootstrap-3footersticky-footer

Making footer stay at bottom with Bootstrap 3

I'm trying to make footer stay at bottom. I'v searched through Google, but with no luck with the code I have. I've tried navbar-fixed-bottom, but that just makes the footer content scroll beneath it, and it stays fixed which I don't want.

Here is the current code I have:

HTML

        <footer>
          <div class="container">
            <p class="text-p"><img src="images/footer-logo.png"> © 2015 <a href="http://www.domainname.no">Domainname.no</a>. All rights reserved.
            <!--<a href="https://www.facebook.com/Helsespesialisten-448789105236638/" target="_blank"><i class="fa fa-facebook"></i>Follow us on Facebook</a>-->
          </div>
        </footer>

CSS

            footer {
              position: absolute;
              bottom: 0;
              width: 100%;
              /* Set the fixed height of the footer here */
              height: 60px;
              background-color: #f5f5f5;
            }

            .text-p{
                text-shadow: none;
                font-size: 14px;
                color: #999;
                padding: 20px 0 0 5px;
            }

I would appreciate any help! Let me know if you need rest of the code.

Solution

  • You were almost there, the one thing it lacks is setting the parent with a relative position:

    body {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-bottom: 50px;
    margin-top: 0;
    position: relative;
}

    And then you can make sure that it stays always there by adding a negative value to bottom. E.g.:

    footer {
    background-color: #f5f5f5;
    bottom: -100px;
    height: 60px;
    position: absolute;
    width: 100%;
}

    Btw, you don't need to add margins to the <body>, since all the content is in it :)

    Edit

    After reviewing a while, the solution above would be enough if bigger screens with higher heights were not considered...

    The problem was that the middle container itself didn't fill the entire space, making the footer appear in the middle.

    Therefore, instead of using position: absolute or fixed for the footer (or even to the <body>), the solution was to adjust the height of that same middle container to the height of the window by this:

    <script>
  $('body>.container').height(
    $(window).height()-
    $('body>.container-fluid').height()-
    $('body>footer').height()
  );
</script>

    Setting the middle container's to the window's height removing the upper container's and footer's height places the footer in the correct position.

    Also for the footer itself this rule comes in handy: footer{overflow: hidden}, just in case the contents/inner spacings of the footer overflow it.