Full height and full width CSS layout

Question

I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:

   ┌────────────────────┐
   │          H         │
   ├─         


        

Answer 1

There's no easy way to get an element to fill a given depth exactly when using percentage measurements.

You could get close by anchoring the footer at the window bottom, then - if cols A and C both share a background colour but col B's background differs, set your body (or container div if present) background colour to match cols A + C to seamlessly fill the gaps beneath of those columns if they're shorter than col B.