Bootstrap full height with sticky footer

Question

I am having a small problem with bootstrap trying to cover the full height of the browser window when the content is not enough. I am using bootstrap within Orchard CMS incase this has any relevance.

The problem can be seen in the picture here

Gutters bleeding into content

The page structure is pretty basic:

<body style="background-color: #b0a2b0;">
<div id="layout-wrapper" style="margin: 0px auto -75px; padding: 0px 0px 75px;">
    <div class="container">
        .... stuff ...
    </div>
    <div class="container">
        ... other stuff
    </div>
</div>
<div id="footer" style="height: 75px;">
    <div class="container">
    </div>
</div>
</body>

html, body and the #layout-wrapper all have height set to 100%. My clever idea until now was to add an extra container and resize it accordingly. The problem being that I need to pay attention when the window resizes and also if there is something on the page hiding or showing (as this will change the available height).

I've tried setting this filler div to height: 100% but it seem to shot past the footer, ending up basically longer than the page and scrolling down ends up dragging the footer up.

What I eould like as an ending result is a footer that is stuck to the bottom and the page to be full length tall even when there are things resizing or showing/hiding.

Any ideas?

Yes, I did try other things and indeed the `#layout-wrapper` div is extending to 100% of the height, but within it the containers do not fill all the available the space. — Tallmaris, Jun 04 '14 at 09:03
+1. Overflow experts may think this is a dumb question with obvious answers, however I am a noob both to CSS and Bootstrap and had exactly the same problem. Thanks to this question and the included links, I now have something that (a) solves my problem, and (b) I understand! — PeteH, Apr 01 '15 at 15:48

score 5 · Accepted Answer · edited May 23 '17 at 10:34

5

Thanks to everyone, mostly for prompting me in the right search direction. I found this wonderful answer on SO: CSS 100% height with padding/margin

Basically I gave my vertical filler the following CSS:

.verticalFiller {
    display:block;
    position:absolute;
    height:100%;
    bottom:0;
    top:0;
    left:0;
    right:0;
    z-index: -9999;
}

This will make the filler a full height div sitting behind all the .containers and showing up the needed white part.

edited May 23 '17 at 10:34

Community

1
1

answered Jun 04 '14 at 09:39

Tallmaris

7,605
3
28
58

This sorta works, but since the content is behind `.container` then you can't click on anything in it (form elements, buttons ...) – imns Jul 22 '15 at 19:02
The purpose of this div is only to provide the extra white background at the bottom of the page between the content and the footer (look at the image in the post). It should have no content. – Tallmaris Jul 23 '15 at 08:19

score 0 · Answer 2 · answered Jun 03 '14 at 16:25

For a pure CSS solution: make the position of the footer absolute, have the top value set to 100% and the margin equal to the negative height, so the page displays it exactly height above the bottom of the page. I also find it helps to shrink the body.

body {
   height:95%;
}

.footer {
    position:absolute;
    top:100%;
    height:20px;
    margin-top:-20px;
    width:100%;
}

demo

EDIT:

Just realized you want the footer to move if the page isn't full length. On my site I just made sure the background color was consistent so the footer didn't look out of place, otherwise I guess a JS solution would be better able to take that sort of thing into consideration.

avcajaraville · Answer 3 · 2014-06-03T17:30:06.380

Well, the way we fixed this issue was with JS. On our layout, we always include a small JS code that does the check when the document is ready, and it is also binded to on screen resizes event.

Basically, we do have a container, where we output our content. So, we check the user's screen height with

$(window).height();

and if this size is smaller than content + footer + header; we then have to resize the container height as this: container.hegiht = screen.height - ( footer.height + header.height )

Just for make it softer, we apply an animation.

Check the code (JS):

function(container){
  var footer = $('.footer').height();
  var header = $('.navbar').outerHeight() + parseInt($('.navbar').css('margin-bottom'));
  var screenHeight = $(window).height();
  if ( ! ( screenHeight < ( (container.outerHeight() + parseInt(container.css('margin-bottom')) ) + footer + header) ) ) {
    // If it is, resize container
    // container.height( screenHeight - (header + footer ) );
    var height = screenHeight - (header + footer );
    container.animate({height: height }, 500);
  }
}

This is the way we do and so far is going very good.

Just dont forget to call this function on DOM - Ready and on window resize.

Hope it helps !

There are so many ways of doing this in CSS that using JavaScript is entirely the wrong way to go. — Bertrand Le Roy, Jun 04 '14 at 00:08
Yes, forgot to mention that we already have a JS solution but it's not enough. You need to remember to apply it also when elements on the page show and hide, since this will change the height of the divs around. — Tallmaris, Jun 04 '14 at 08:55

Bootstrap full height with sticky footer

3 Answers3