My Googling and experimenting has me stumped. I’m well versed with usual CSS layouts but I’d be eager to know what is the best approach for this and I can’t find anything to meet my requirements.
I would like 3 columns, all 100% height of the browser window.
The central column needs a sticky footer but with it’s content vertically scrollable.
I will probably need to scroll one or both of the other columns too but I’m sure that will be easy to add?
Did you mean something like this very old demo (over 10 years old) ?
There are a lot of hacks in place for IE6 but they can be left out these days and a proper doctype used. The code needs a revamp but should give you a clue as how to go about it.
The layout of mine is actually more subtle than the one you linked to as the left and right columns are scrolled by the viewport scrollbar. The layout in your link is simply some absolutely placed divs and each column will get its own vertical scrollbar (note that if you have fixed width content in the right column of that example then it will be unreachable as the horizontal scrollbar has been removed ).
You can make as many columns as you like just using top: xxpx and bottom: xxpx as long as you give each its own vertical scrollbar. I did loads of these examples about 10 years ago but they are full of hacks to make IE6 work.
If all you want is independent columns then simply place them absolutely using top and bottom and allow for room for the footer/header where needed (eg. top:100px bottom:100px). They however can end up looking ugly when all horizontal and vertical scrollbars click in.
I just needed independent columns with one having a sticky footer, I’m not sure why I found it so daunting. I’ve sorted it now and hopefully it’ll be ok, ff not I’ll be back on here to sap your brain some more
