How do I make a DIV fill the page, without "position: absolute;"?

Question

I'm trying to design a page layout that has a couple of headers, some main content, and a footer.

I want to use jQuery UI tabs widget in the main content with a border around it, so the div MUST fill all the space between the headers and footer, but also I want the content to expand if needed, off the bottom of the screen and a scrollbar appear so I can scroll down and view it.

Effectively, I want the minimum height of the content div to be the distance between the header and footer, but allow it to expand.

I've implemented the Sticky Footer method, which would work really nicely if I didn't want a border around my main content. In this jsFiddle example the div with the red 2px border needs to initially fill the page, and when you click the "Add Stuff" button to add more content which goes off the bottom of the screen it needs to push the footer down and show a scrollbar.

This is what I'm trying to achieve:

...with these rules:

• Content needs to have a border.
• Content needs to start off by filling the space between header and footer.
• Content needs to grow beyond the bottom of the page, showing a scrollbar.
• Footer needs to be pushed down as content grows.
• Use only CSS, so that if content changes dynamically, everything adjusts automatically.
• Work in modern browsers only, I'm not interested in supporting IE<8.

I've tried:

• Absolute positioning, but this fixes the content to the size of the screen and doesn't allow it to expand past the bottom.
• jQuery positioning, but this feels too much like a hack, and seems to be a bad way to fix it.
• Using height: 100% and min-height: 100% in various places, but doesn't seem to achieve what I want.
• Looking at other Stack Overflow questions around the same problem, but none of them seem to account for the content growing beyond the bottom of the screen.

Answer 1

Best I could come up with is http://jsfiddle.net/Atjxc/6/

Because the height of the window is variable, I had to use percentages only, along with absolute positioning.

.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}

I added a container for the main part, which shows a scrollbar when the content gets too long. I couldn't put borders because they have to be set in px values, and it messes up my percentage-based heights.

Answer 2

Well, You could just measure the actual distance that is between the header and footer, then set the min-height to that exact px.

like for eg, the distance between is 600px,

then set

min-height:600px;
height:100%

In this way, when you have content that fits way under min-height eg. 600px then the height shall be 600px, now when the content is added and it grows out of the 600px height, then the container div shall elongate in height to accommodate the added content which is covered by height:100%; .

And yeah, you can use "Measure It"(its a chrome/firefox extension) to measure the onscreen distance on the fly, its more convenient.

Hope this helps, and heres the jsfiddle http://jsfiddle.net/Atjxc/11/