Question

I produce a popup div which looks like a classic Window on my web page which can be minimized/resized/moved around.

I need it to have a header which is 25 px high, a footer which is 50px high and then the body of the window always takes the “rest”, which is variable because the window could be resized. The body of this window gets its DOM updated dynamically where elements can be added. If enough elements are added that their combined height exceeds the height allotted to the bod of the window then this body area should start to scroll, where when the user scrolls the footer always remains in place – its just the body content which is scrolling.

How to accomplish this using CSS, jQuery and that it works with IE8?

The code should look like this, basically:

<div id="wrap">
  <div id="header">
    ... 25 px high space fixed to the top
  </div>
  <div id="body">
    ... stretches to fill the space available height/width ... 
    ... scrollbars available when the body content exceeds height available ...
    ... jQuery allows user to resize the whole window, so this body should always fill ...
  </div>
  <div id="footer">
    ... 50px footer with controls, must always be fixed to bottom of window ...
    ... must never move no matter if the user scrolls the body ...
  </div>
</div>

Can this be accomplished so that it works cross browser? IE8+, Firefox, Chrome?

Answer 1

Try a demo here http://jsfiddle.net/XfPAG/4/. The idea is using absolute position:

HTML

<div id="wrap">
  <div id="header">
    ... 25 px high space fixed to the top
  </div>
  <div id="body">
    ... stretches to fill the space available height/width ... 
    ... scrollbars available when the body content exceeds height available ...
    ... jQuery allows user to resize the whole window, so this body should always fill ...
  </div>
  <div id="footer">
    ... 50px footer with controls, must always be fixed to bottom of window ...
    ... must never move no matter if the user scrolls the body ...
  </div>
</div>

CSS:

#wrap, #header, #body, #footer {
  position: absolute;
  left: 0;
  right: 0;
}

#wrap {
  top: 0;
  bottom: 0;
}

#header {
  height: 25px;
  top: 0;
}

#footer {
  height: 50px;
  bottom: 0;
}

#body {
  top: 25px;
  bottom: 50px;
  overflow: auto;
}