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.
- 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 \[code\]height: 100%\[/code\] and \[code\]min-height: 100%\[/code\] 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.