If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Positioning relative div between fixed divs

I am trying to create a page with a fixed header and a fixed footer. I would like to display content immediately below the header and have its relative position maintained when the window is re-sized. When the content is too large for the display, I would like a vertical scroll bar to appear so the content can be scrolled between the header and footer. I have not been able to achieve this.
I've attached test code. When I re-size the webpage, the content area is not positioned immediately under the header and the scroll bar is not active.

What technology should I look into (php, javascript, etc) to solve this problem? Any help would be much appreciated. Many thanks in advance.

<body>
<div class="pageHeader">
This is the header.
</div>
<div class="pageContent">
<div class="container">
Line 1<br>
Line 2<br>
Line 3<br>
Line 4<br>
Line 5<br>
Line 6<br>
Line 7<br>
Line 8<br>
Line 9<br>
Line 10<br>
Line 11<br>
Line 12<br>
Line 13<br>
Line 14<br>
Line 15<br>
Line 16<br>
</div>
</div>
<div class="pageFooter">
This is the footer.
</div>
</body>
</html>

Thank you. That works a lot better.
I moved the pageheader and pagefooter outside the container. This prevents them from scrolling.
Also, I found that setting the header and footer heights to a fixed unit (px or em) rather that a percentage, maintained the alignment of the page content with the bottom of the header. With a percentage height, the relationship changes as the page width is resized (I don't understand why).
The following modified code works exactly as I want. Thanks again for pointing me in the right direction.

<body>
<div id="pageHeader">
This is the header.
</div>
<div id="container">
<div id="pageContent">
<div id="inner">
Line 1<br>
Line 2<br>
Line 3<br>
Line 4<br>
Line 5<br>
Line 6<br>
Line 7<br>
Line 8<br>
Line 9<br>
Line 10<br>
Line 11<br>
Line 12<br>
Line 13<br>
Line 14<br>
Line 15<br>
Line 16<br>
</div>
</div>
</div>
<div id="pageFooter">
This is the footer.
</div>
</body>
</html>