Twitter Bootstrap Question posted in

Bootstrap sticky footer has problems with small width page – Twitter bootstrap

I’m trying to create a footer that stays below the page content and sticks to the bottom of the page. I’ve tried applying Twitter Bootstrap 3 Sticky Footer to my page, but it causes the footer to stick to the bottom and overlap the page content (if the page is too short).

I’m currently using the css:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 348px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 348px;
}

and the html: (simplified)

<body>
   <!-- Navigation -->
  <div class="wrapper">
    <div class="container"
    page content
    </div>
  </div>
<footer class="footer navbar-fixed-bottom">
  <!-- Footer-->
</footer>
</body>

and the footer is now sticking to the bottom, but when the page is very narrow, you can see through to the background instead of the footer background covering it.

Image

Any help in resolving this would be greatly appreciated.

Tags:

2

Answers


  1. 0

    Problem is with the height. Just remove the height from footer then it will be fine. 

    html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 348px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

<!----html---->
<body>
    <!-- Navigation -->
    <div class="wrapper">
        <div class="container">page content</div>
    </div>
   <footer class="footer navbar-fixed-bottom"></footer>
</body>
    Login or Signup to reply.
  2. 0

    Seeing that you have used jQuery. Along with removing the height from footer, a simple resize() event can decide the correct margin-bottom.

    $(window).resize(function(){
    var xHeight = $('.footer').height();
    $('body').css('margin-bottom',xHeight + 'px');
})

    Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search