Three vertically stacked DIVs with scrolling middle
Revisiting this for 2017. With flexbox, this can now be done without having to explicitly define the height of the header and footer. This works, at least prefixed, in all browsers that currently have any significant market share except IE <=10, which still has 1-5% share depending who you ask. Because this is generally a visual/usability mechanism and does not block functionality, using flexbox for this case should at least leave your page usable for users of unsupported browsers.
All you need to do is wrap your header, content and footer in a div that has limited height (for example, by setting the height or max-height properties as long as they are not relative to a container that will grow with content). One way is for <html> and <body> to have 100% height and for the container be a direct child of body, but there are other ways. Container should have styles:
display: flex;
flex: auto;
flex-direction: column;
And apply the style to the scrollable pane:
overflow-y: auto;
If you want the scrollable pane to grow so all vertical space is used:
flex-grow: 1;
and on the header and footer (necessary for Safari and IE 10):
flex-grow: 0;
https://jsfiddle.net/ornsk10a/
This should work
<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
</div>
Edited - For fixed position header and footer in modal dialog
<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;">
<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
</div>
</div>