How to stick the footer at the bottom?

This usually only happens when the page isn't long enough for the screen you're using.

A solution is possible, but it requires javascript, and can be a little hacky.

There's also some CSS hacks you can try.

You're better off adding more content to the page if you don't like the gap at the bottom of the screen.

http://ryanfait.com/sticky-footer/
http://www.cssstickyfooter.com/

Neither of those websites codes are working for me, aren't there any way to fix this?

Alright if it wouldn't work, how do I disable the footer

You can disable the footer with this CSS:

.site-info {
      display: none;
}

Unfortunately there's no easy "fix" - the HTML elements stack as they should, and if the container above the footer are too short for the screen, the footer will appear before the bottom of your screen.

Let me know if you need anything else :)

Thanks for your help!
The footer has been disabled.

You're welcome :)

I just thought I would throw this out there. As Tom mentioned, this solution is definitely hacky since I'm hardcoding several pixel offsets for headers, footers, and other formatting. As such, the values will be different for others and some may not be needed. With that said, the following CSS allowed me to force the page to take up the entire height of the window with the footer on the bottom. I haven't spent enough time ensuring that none of the CSS is redundant or unnecessary but this was what worked for me and functions properly in all modern browsers as far as I could tell.

* {
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
    overflow-y: auto;
}

body {
    height: 100%;
    min-height: 100%;
}

#page {
    height: calc(100% - 150px);
    overflow: hidden;
    width: 100%; 
    display: table;
    table-layout: fixed;
    margin-bottom: -32px;
}

#content {
    height: 100%;
    width: 100%;
    display: table-cell;
    table-layout: fixed;
}

#primary {
    height: 100%;
}

#main { 
    height: calc(100% - 50px);
}

article {
    height: 100%;
    padding-bottom: 32px;
}

.inside-article {
    height: calc(100% - 80px);
}

.site-footer {
    margin-top: -32px;
    height: 32px;
} 

Very useful - thanks for posting! :)

Using the cssstickyfooter seemed to work nicely for me. I haven't tested it thoroughly, but so far I do not have any issues. Adjust the height "50px" accordingly.

html, body {height: 100%;}

#page {min-height: 100%;}

#content {overflow:auto;
	padding-bottom: 50px;}  /* must be same height as the footer */

.site-info {position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

Thanks!

I changed the height under site info to min-height. This seems to work better for me ;).

Thanks for posting your solution! :)

For one of my sites I use that code:

html, body{
height:100%;
}
.site-footer{
bottom:0;
position:relative;
}

Everything works except sticky menu - always moves page to the top after menu show. Any ideas to fix that?

Interesting, can I see?

@Tom check my site jix.im. Sticky menu is only on mobile.