Question

I’m sure this has been asked before but I couldn’t find it.

Please see http://jsfiddle.net/Bw5j4/1/

I want to make #room div to fit 100% between #top and #commands even if there is no content in it.

And, if the content overlaps (as in current example) I want to fit it within borders of #room with scroll.

I need to keep #commands stuck to the bottom of page. I’ve tried height, max-height but it didn’t work.

Answer 1

This should get you started to lock in the middle section

.room {
  background-color:#fff;
  border:1px solid #d8d8d8;
  overflow:auto;
  position:fixed;
  top:80px;
  bottom:150px;
  left:0;
  right:0;
}