First time here? Check out the FAQ!

How do I make "ground" (the footer) always on the bottom?

On short pages, the "ground" element (the footer) hovers, and isn't right at the bottom. How can I fix this?

Edit: See screenshot below:

image description

Joseph's avatar
asked 2012-07-25 07:15:41 -0500, updated 2012-07-25 15:25:16 -0500
edit flag offensive 0 remove flag close merge delete


I'm not sure you'd want it always at the bottom. What are you going to do when page is long?

Evgeny's avatar Evgeny (2012-07-25 16:06:23 -0500) edit

When the page is long, it shouldn't show until you scroll down. :)

Joseph's avatar Joseph (2012-07-26 12:47:33 -0500) edit

Yeah, that's ideal but harder to implement. We'll get to the adaptive design though - it's a must to support display in mobile devices.

Evgeny's avatar Evgeny (2012-07-26 21:11:54 -0500) edit
add a comment see more comments

1 Answer


Place this in the extra.css (found in askbot/media/style) as a quick, clean workaround to have a nice sticky footer:

html {
    position: relative;
    min-height: 100%;
body {
    margin: 0 0 100px; /* bottom = footer height */
#ground {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
madaerodog's avatar
answered 2015-01-07 10:14:25 -0500
edit flag offensive 0 remove flag delete link


add a comment see more comments