: How do I make it so my website footer is always at the bottom of the page (but not sticky)? I'm fairly good at getting stuff to work nicely as I come from a coding background, but I'm

@RJPawlick971

This is a stack overflow question. Not graphic design.

But to answer it, you need to use javascript. After the page renders, calculate the height of the viewport, then calculate the height of the content area. Then use javascript to adjust the layout as needed.

I wouldn't recommend this, though. On the web, the footer is typically at the bottom of the content--not the bottom of the browser. This is where people expect it to be.

Vote Up Vote Down

@Cugini998

This is possible but a bit tricky. What you need is a html that has 3 divs:

<div id="page">
<div id="main">
<p>This is the contents on the page</p>
</div>
</div>

<div id="footer">
<p>stuff</p>
</div>


Then the following css:

html, body {
height: 100%;
margin: 0;
padding: 0;
}
#page {
min-height: 100%;
} #main {
overflow: auto;
padding-bottom: 100px;
} #footer {
background: #ccc;
clear: both;
height: 100px;
margin-top: -100px;
padding-top: 0;
position: relative;
width: 100%;
}


The idea is that #page flushes the footer down. The -100 margin-top gets it in the playing field. And the #main keeps the footer flushed if the page is too big for the content. If you add stuff in a div with padding inside the footer be sure to shorten the footer suitably.

Example on jsbin

Edity Edit

Or maybe you want it the other way around in which case. Just make html the color of your footer, then make the header white and let the footer be mostly normal.

Alternate example on jsbin

Vote Up Vote Down

@Vandalay110

There's a few approaches you could take. First, and my favourite solution, is to have the html have the same background color as the bottom of my footer, so the transition isn't that obvious.

You could also use the vh unit, which corresponds to 1% of the height of the current viewport. It's not supported by all browsers or devices, but it does a decent job of always having something at the bottom of the screen (or below it).

Vote Up Vote Down