Make footer stick to bottom of page using Twitter Bootstrap

Question

I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom. I have put all my pages in a "holder" ``` #holder { min-height: 100%; position:relative; } ``` And then used the following CSS for my footer ``` ul.footer { margin-top: 10px; text-align: center; } ul.footer li { color: #333; display: inline-block; } #footer { bottom: -50px; height: 50px; left: 0; position: absolute; right: 0; } ``` The html for my footer ```

``` I would like to keep the footer fluid.

Accepted Answer

As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807

One of the key parts of this solution is to add `height: 100%` to `html, body` so the `#footer` element has a base height to work from - this is missing from your code:

```
html,body{
    height: 100%
}
```

You will also find that you will run into problems with using `bottom: -50px` as this will push your content under the fold when there isn't much content. You will have to add `margin-bottom: 50px` to the last element before the `#footer`.

Make footer stick to bottom of page using Twitter Bootstrap

Solution

Problem

Related problems