HTML & CSS question: Element between two absolute-positioned elements needs to resize correctly

Question

#header
{
 position: absolute;
 top: 0%;
 height: 24px;
}
#body
{
 position: absolute;
 top: 24px;
 bottom: 20%;
 overflow: auto;
}
#footer
{
 position: absolute;
 bottom: 0px;
 height: 17.2%;
 min-height: 80px;
 overflow: auto;
}

My problem is that when I compress the browser window, the middle element (the 'body') starts to slip into the footer's area (when 20% from the bottom becomes larger than the minimum height of the footer). The footer can be larger in height than its minimum, but it cannot be smaller.

Any good way to do this without Javascript code?

Answer 1

There are some examples of headers and footers on Dynamic Drive. These are pure CSS layout examples.

You should be able to achieve the same effect with a combination of these two.

Answer 2

No. When an element is positioned absolutely it is removed from the flow of the document and has no knowledge of any other elements.

I have not seen a sticky-footer solution that will work with a variable height footer.