My page only consists of two columns, a footer and a header. The header only contains a logo. The main column (the left one) only contains a h1 and a paragraph. The secondary column on the right just contains a vertical slider. Then I have a basic footer with my copyright info in it.
Very simple page which I could code with my eyes shut, if it wasn’t for the fact that I need the footer to remain at the bottom of the viewport even when the main content doesn’t fill all of the viewport. I’ve not really had any need for sticky footers in the past so it’s a bit of a new one to me.
I came across an article that explained about how to achieve a sticky footer, and it works, but my concern is that the sticky footer is just below the fold. I’d like it to be in view, at the bottom of the viewport, not just below the fold. Is there a way of achieving that?
The code used in the article:
html, body {
height:100%;
margin:0;
padding:0;
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
}
* html #outer{height:100%}
<body>
<div id="outer">
<!-- all content apart from the footer must go inside this outer wrapper -->
</div>
<div id="footer"></div>
</body>
Could this be changed to achieve what I need or would I be better off using a different technique?
but my concern is that the sticky footer is just below the fold. I’d like it to be in view, at the bottom of the viewport, not just below the fold. Is there a way of achieving that?
Hi,
There are two ways to bring the footer back into view. You either use negative top margin on the wrapper or on the footer itself. In both cases the footer sits outside of the wrapper div but the footer height must be compensated for in each method.
The link that kohoutek gave uses a negative top margin on the wrapper. It is what I sometimes refer to as the “Top Border Soak Up Method”.
Top Border Soak Up Method
Sets a top border (= to footer height) on the first element in the wrapper to recover the wrappers negative top margin.
or
Negative Margin Footer Pull Method
Sets a bottom padding (= to footer height) on an inner div to keep text from sliding under the footer when the footer is pulled into the viewport with a negative top margin.
You will need to be sure to get the Opera & IE8 min-height:100% bug fixes in place. They are shown in the link that kohoutek gave you. The links I gave are just for showing the two methods.
Hi,
The text-align:center in that example was just to center the page in IE5, there is really no reason to be concerned about that browser anymore. The text-align is being reset to left on the outer wrapping div, that is why you are not seeing all the text centered.
See what happens in IE6 if you remove that rule.
IE6 will honor auto margins when it has a proper doctype, it is only IE5 that needs it.
Would the star hack work as well? i.e.
Yes, IE6 treats height as if it were min-height. That link that kohoutek gave you was superseded by this one: http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm
which no longer uses display:table for IE8. The * html hack was used for IE6 since there was no longer any need for an IE CC.
The one thing I don’t like about the pmob method is that it requires the use of a huge top border.
#header {
border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
Another way of doing this is to create a spacer div and put it in at the very bottom of the main div. The space div must be equal to the height of the footer and the negative margin applied to the footer. No need for a huge top border doing that.
Sounds like that requires adding another div to the markup, which to me is unnecessary. I’d rather go with the huge border because I won’t even see the border since it’ll be off the screen and my markup won’t be bloated with spacer divs (which remind me of the days of using tables for layout btw).
Why should that bother you, the border is completely out of sight and it’s only job is to recover the negative top margin on the main wrapping div. It is just one line of CSS that allows you to do away with unnecessary elements (spacer div) in the html. All the border is doing is pushing the page content down to the top of the viewport.
Another way of doing this is to create a spacer div and put it in at the very bottom of the main div…
Another way besides that is to just use a bottom padding on the inner content div. In post#4, I had pointed out the two methods that don’t require empty divs in the html.
It bothers me because it is there. Even if it cannot be seen, it is there. Why does an empty spacer div bother you? As far as I know, an empty div with “clear: both;” is the main way to clear floated columns.
I see that now. It requires a nesting of a div inside the main wrapper div. But it works good. No need for a spacer div. I tweaked my code to use that method. Thanks for the advice.
It must be bothering you because you haven’t fully understood exactly what the border is doing. When using that top border method the entire page wrapper is pulled through the top of the viewport with a negative margin that is equal to the footer’s height. That prepares the space for the footer right off the bat and nothing else is needed for the footer. The top border just pushes the first element back into view.
The empty spacer div bothers me because it is simply not needed and it becomes a useless element in the markup. Floats are contained with overflow:hidden; on the float’s parent. However, with this sticky footer layout, float containment is taken care of with the wrapper:after block. That is shown in this example, view page source for comments in the CSS.
That wrapper:after block is fixing the IE8 min-height:100% bug and it is containing floats at the same time.
