HEADER

The ask is a 1280 pixel width page; I'm using percentages to determine height of each area. This header is 20% as high as the page.
Also note that I have the bodies margins as auto - this keeps all content centered in the page.

NAV


I'm also using percentage for width here
As an example, this is 20% as wide as screen.
I am also 60% as high as page.

MAIN


As the main content, I use the bulk of the screen space. I use 60% of the height and 60% of the width of screen space.
Here, we want this main content scrollable (containing multiple elements), which (for the height) can be acheived via overflow-y: scroll.
Each even/odd square items represent an individual element.
item 1
item 2
item 3
item 4
item 5

FOOTER


Similar to the header, I'm using 20% height and 100% width.