[Resolved] How to stick the footer at the bottom?

[Johandrex]

Hello, I just bought this domain and website today.
And I wonder how to stick the footer to the bottom since there’s a gap between the bottom end and the footer.

[Tom]

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/

[Johandrex]

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

[Johandrex]

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

[Tom]

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 🙂

[Johandrex]

Thanks for your help!
The footer has been disabled.

[Tom]

You’re welcome 🙂

[David]

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;
} 

[Tom]

Very useful – thanks for posting! 🙂

[Tekno Teddy]

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!

[Tekno Teddy]

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

[Tom]

Thanks for posting your solution! 🙂

[Krzysztof]

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?

[Tom]

Interesting, can I see?

[Krzysztof]

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

[Author]

Posts