I’ve tried to set a minimum height for my site, so that on larger or standard monitors the footer is always at the bottom of the page.
To an extent my attempts have worked, and I have set a minimum height and the footer is always at the bottom.
The problem is that the footer is always too far down, rather than being at the bottom of the page you actually have to scroll down to it. I’ve tried to fix this but can’t work out how to
Please take a the look at the site.
The CSS I have used for the site is the footer, (as well as putting height = 100% on the body) is
The problem is that the footer is always too far down, rather than being at the bottom of the page you actually have to scroll down to it. I’ve tried to fix this but can’t work out how to
Hi,
You have no height on your footer, for a sticky footer layout to work correctly the footer must have a fixed height. Then that height has to be recovered with negative margins in one of two ways.
I have briefly explained the methods on the links below but I will explain a little further here.
That method pulls the main wrapping div (div with min-height:100%) through the top of the viewport with a negative top margin that is equal to the footer height. That gets the footer at the bottom of the page but now a portion of the header is out of sight. The first element on the page (normally the header) then gets a top border on it that is equal to the footer height. That pushes the header back into the viewport while the footer stays at the bottom.
This method drags the footer itself back into the viewport with a negative top margin. The footer is now sitting on top and hiding any content that may have been near the bottom of the page. To fix that an inner div must be nested in the main wrapping div (div with min-height:100%). The inner div gets a bottom padding on it that is equal to the footer height, that protects any content from sliding under the footer. You must use an inner div since you can’t add any padding to the main wrapping div with min-height:100%, that would cause it to exceed the min-height and it would give a scrollbar even if there was minimal content.
Now depending on which method you choose there are some bug fixes that must be used for the Opera and IE8 min-height:100% bugs. An explanation of them can be found in the FAQ link ralph provided.
Here is an example of the #2 method I explained above with the Opera and IE8 bug fixes in place.
Sticky footers are not always feasible due to the fact that the footer requires a fixed height but as long as your footer is not loaded with content then they work very well.
