Okay, so I’ve read some other people have had this problem, but they either resorted to JS or the solution just wouldn’t work for me.
I have this:
// The Header //
/* */
/* CONTENT */
/* */
// The footer //
Currently the work in progress can be found at:
http://newsite.carlsimmons.co.uk/
It’s working as intended, apart from the always present vertical scroll bar. This is because the content’s height is set to 100%, +header & footer height and you’re left with something always bigger than the page.
I have tried the absolute option (among plenty of others), but they all have faults or don’t work. Just thinking there must be some way to achieve this surely? I guess I shouldn’t be too afraid of using JS for this, since it would still look fine for people with JS, but not exactly good practice and might cause some lag on browser resizing.
You can use
calc(100% -20px)http://www.w3.org/TR/css3-values/#calc
But for now its only Firefox compatible
http://hacks.mozilla.org/2010/06/css3-calc/
EDIT : IE 9 was the first major browser to implement calc() (cf Andy E’s comment)