UPDATE 2
I found a tentative solution that currently works for me in Chrome on Mac OS X. You can check out my answer below for details. For those of you who are still trying to come up with CSS only solutions or JavaScript solutions, please keep going and let me know what you come up with! Please :)
UPDATE
The answer below is really close to an all CSS solution, so I'm going to try to make it work. In the meantime, I'm opening up this question to JavaScript solutions as well. How would you do it using JavaScript? All solutions are now welcome :)
Let's see if we can solve this one together!
I'm trying to set up a layout, check out the image...
I'm using the "sticky footer" technique, which works great, and I've set it up so that whenever one of the two columns gets taller, the other will also match its height, as described in this article. The problem, however, is that these two columns don't reach the footer naturally... I'm forcing the height through JavaScript.
Anyway, all the relevant code can be seen in the fiddle...
CODE
http://jsfiddle.net/UnsungHero97/XrJMa/embedded/result/
QUESTIONS
First big problem: how can I set it up so that the height of these columns reaches the footer below? I want it so that when the page loads, both pink and blue columns reach the bottom automatically.
How can I get it so that when the pink column grows beyond its current height, a local scrollbar appears, but when the blue column grows beyond its current height, the overall page scrollbar appears and the footer is pushed down?
- basically, I want the height of the pink and blue columns to ALWAYS be the same height but the height is only determined by the blue column; blue is dominant so it can expand the height of both columns; pink cannot expand the height, just be at the same height as blue
- Can this functionality be achieved using only CSS?
Let me know if I need to clarify anything.
See Question&Answers more detail:os