Sticky Footer using CSS's display: table

I've been heavily using twitter's bootstrap for my projects and mostly using sticky footer to keep the footer section sticked to the bottom of the browser's screen.

Twitter is using Ryan Fait's method which works nice for the examples. Seriously, it doesn't work well for me.

I kept spending my time to calculate the pixels of wrap's and footer's heights to meet the correct number to make it work, especially to manage how it should work on different screen sizes.

One day I found Torben's blog about a different way to achieve the same result. I used it once for a project. It worked for that case.

Then recently I had to work again with twitter's bootstrap and tried to applied the Torben's method, and at the end I had to modify the code to adjust the styles. And this works great for mobile browsers.

Here is what I came up with:

I use a "wrap" div in here as the wrapper of the whole code, "innerwrap" to hold the main content, and "footer" to hold the footer's content. I don't use "body" as the wrap element to make it able to display the vertical scroll bar on browser.

If you're using header, you can place it inside the "wrap". If your header is "navbar-fixed-top" (sticked to the top of the screen), you can place it anywhere, even out of the "wrap"

Another option is to not even using the innerwrap at all because you just do not care about the background of the upper part.

This will push off the footer to the bottom of the browser's screen as well. You might want to keep using #footer's display: table-footer-group; on any option, because it is actually the CSS's option to put that element as the bottom of the table. Because we set the height of the #wrap or #innerwrap as 100%, it will be pushed down below.

Anyway, whatever the option is, I don't have to figure out about the numbers of the pixel. This CSS's table property really helps.

I hope this can save other people's time, like it saved mine.


blog comments powered by Disqus