Bootstrap sticky footer has problems with small width page

Question

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.

Do you have a link to a 'short' page? Ah, it also doesn't work properly when the page isn't very short. — KIKO Software, Apr 13 '17 at 06:10
Your page seems fine? where is the sticky footer in the link you specified? More over i wouldnt recommend making a 348px tall footer `sticky` !! — Jones Joseph, Apr 13 '17 at 06:13
@JonesVinothJoseph The black footer at the bottom. https://i.stack.imgur.com/LrWe5.png When the page is narrow this happens. — huhn, Apr 13 '17 at 06:18

score 1 · Answer 1 · edited Apr 13 '17 at 07:22

1

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>

edited Apr 13 '17 at 07:22

Jones Joseph

4,703
3
22
40

answered Apr 13 '17 at 06:20

sneha

435
4
9

This one is perfect @huhn – Jones Joseph Apr 13 '17 at 06:22
1

Thanks. However, now when the page is narrow the footer begins to overlap the page content, hiding it. http://i.imgur.com/St43mlr.png – huhn Apr 13 '17 at 06:23
write media query for all screen then chnage the value of wrapper class. example .wrapper { margin-top: 16px; padding-bottom: 500px; } – sneha Apr 13 '17 at 06:30
@sneha then the OP would have to sit and resize the browser and find all the `margin-bottom` values for all screen sizes `:)` – Jones Joseph Apr 13 '17 at 06:34
Thats why I am saying write media query for mobile ,tablet and desktop. – sneha Apr 13 '17 at 06:37

score 1 · Accepted Answer · answered Apr 13 '17 at 06:30

1

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

answered Apr 13 '17 at 06:30

Jones Joseph

4,703
3
22
40

This gets the job done. Kinda disappointing that jQuery is needed. – huhn Apr 13 '17 at 06:40
Or else use media queries as @sneha suggested !! But you will have to work on which screen size needs how much `margin-bottom` – Jones Joseph Apr 13 '17 at 08:10

Bootstrap sticky footer has problems with small width page

2 Answers2