Ok, I have a bit of a CSS conundrum that I've revisited numerous times but without resolution. On an internal web application I've developed, I have a lightbox-style popup div that presents a form to the user. The height of the popup div is flexible, as in it grows with the height of the content until the content exceeds the maximum height specified on the absolutely positioned container (84%), in which case a scrollbar appears. The problem is that the header and footer are meant to be fixed, but the currently implementation causes the header and footer to be at the top and bottom of the content respectively, so when one scrolls down, the close button goes out of view, and vice versa for the save button at the bottom. There's no way around this in the current implementation.

I've tried other implementations, but I've so far found no way to achieve both a fixed header and footer as well as maintaining the flexible height (up to a maximum).

Here are two examples. One has flexible height but with scrolling header and footer (represented as blue div's), while the second example allows the header and footer to be fixed, but requires that the container always takes up 84% of the window, even if there's hardly any content. Be sure to play with the amount of content in the body div so you can see the behaviour of each under different conditions.


I essentially want the best of both worlds. The first example would be perfect, if only the container shrunk when there wasn't much content, and vice versa, the second example would otherwise be perfect, if only the header and footer were fixed.

Here's hoping there's a CSS trick to accomplish what I've after without reverting to an ugly JavaScript solution.