Fluid 3 column layout with header, sticky footer and full height columns

Question

I've been trying to create a layout with the following features:

• 3 fluid columns
• Columns that are full height
• A header
• Sticky footer

I found a similar question here: CSS layout with header, footer and multiple 100% min-height content columns

The author solved the problem using a table based layout. I would like to avoid using tables if possible so I can easily hide the outer columns on smaller screens.

Here is the code I have created so far: http://cdpn.io/DqGfp

As you can see in my codepen demo I am almost there. A refresh produces the correct layout in all cases but ideally this should happen on resizing too.

Here are the resizing bugs I'm trying to fix:

1. Going from a tall window to a short window causes an unnecessary scrollbar.
2. Going from a wide window to a thin window causes the content in the middle column to go under the footer.

I've tried using

$(window).height()

instead of

$(document).height()

but that causes a whole bunch of new bugs.

Any help is VERY MUCH appreciated!

Answer 1

So I figured it out. I needed clear all the forced column heights before recalculating them when the window is resized.

Here's a link to a post about my solution: http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/

Thanks for the help.