Almost there! – Fluid 3 column layout with header, sticky footer and full height columns

[benpearson]

Hello,

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’ve got this far and hit a wall:
[http://cdpn.io/DqGfp](http://cdpn.io/DqGfp “Demo”)

A refresh produces the correct layout in all cases but ideally this should happen on resizing too.

Here’s the resizing bugs :

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!

Ben

[PicnicTutorials]

Here I’m pretty sure I worked out all those bugs a long time ago when I coded these. There are 5 ways to go about this type of layout here are all 5 ways to do it. Just replace number 1 through 5 in the link…

http://www.websitecodetutorials.com/code/website-templates/style-threecolumn1-demo.php

[benpearson]

Thanks very much Picnic. What a brilliant resource. I wish I had come across your site when I was trawling for answers.

Anyway… I figured it out what was wrong with my jQuery. I needed to 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.

[Author]

Posts