CSS end of page colour

It seems quite common for a web page to have at its end a footer in a different colour from the main page background:

Beyond the end

If the page is short, this can lead to the situation where the footer ends before the bottom of the browser window, and the main page background colour reappears, making the footer feel not like the end of the page it is meant to be.

The typical solution to this would be for your main page background to be the footer colour, and then to make sure your actual main content has its own background colour so as to appear to be the main colour. But this can be hard to achieve, depending upon your site structure, and you might have to worry about the main background bleeding through somewhere you missed.

Box shadow to the rescue

While looking at Northamptonshire County Council’s website earlier today, I noticed they had a cunning way of dealing with this, which I couldn’t find written up anywhere else, so thought I’d note it here. Again, as with my Guardian post, credit goes to whoever wrote it!

The solution is to have one line of CSS on the footer:

box-shadow: 0 1000px 0 1000px #336;

This creates a ‘shadow’ (actually a block of colour, as the blur radius is 0) in the footer background colour, that is 1000px+(height-of-footer)+1000px high, but offset 1000px downwards, so it starts at the top of the footer. This creates exactly the effect required, making the footer colour carry on for a long way after the end of the content, without requiring any messing about with the main page background colour.