Layout fixed width, full height with fixed footer, full width

0
votes

I could use some help on a layout. This is what I'm trying to achieve:

Layout fixed width, full height with fixed footer, full width

Here are the specs:

  • header has fixed height
  • footer is always at the bottom and has full width (100%)
  • content has fixed width
  • content basically has full height minus the footer, but overlaps the footer by exactly 20px

This of course must work when the content is both shorter and longer than the viewport. I've been playing around with this for a few hours and I just can't get it to fulfill all the features.

I created a fiddle for it here: http://jsfiddle.net/Sq4Pk/6/

The problems with this solution are currently:

  • the shorter the viewport gets, the more the content overlaps the footer (must be exactly 20px)
  • the content part does not fill the viewport

Is this even possible? Can somebody help me out with this?

I've tried these solutions and variations thereof but both are slightly different from my usecase:

Thanks a lot for any help!

Chris

1
csslayoutoverlap

1 Answers

1
votes

I created a fiddle with a possible workaround, inserting two extra divs in the footer to fake the overlay.

One annoying downside: in Chrome the highest div (to mask the dropshadow) seems to shift 1px upon resize. FF + IE are fine.

http://jsfiddle.net/Sq4Pk/3/

EDIT: found a fix for the pixel shift in Chrome: http://jsfiddle.net/Sq4Pk/4/

EDIT2: or if it's an option to use jQuery, the result is even slightly better: http://jsfiddle.net/Sq4Pk/5/