css middle div scrolling and 100% height - html

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;
}

Answer 2

You'll need to use JavaScript for this, unless the page is guaranteed to always be the same size and can't be resized. If that is the case, you can just explicitly set the height on .room. Otherwise:
function setRoomHeight() {
$(".room").height(
document.documentElement.clientHeight
- $(".top").height()
- $(".commands").height()
- 20);
}
$(setRoomHeight);
$(window).resize(setRoomHeight);
http://jsfiddle.net/gilly3/5TzFm/
(is jQuery ok, or would you prefer a non-jQuery example?)

Answer 3

This is what lazy* developers use tables for. It's very easy to get these fluid layouts like this. Without tables, it's more difficult.
I think perhaps this is something like what you want: http://jsfiddle.net/thomas4g/6u7ry/13/
<div id="wrapper">
<div id="top">Top Stuff</div>
<div id="content">
My Epic Content
</div>
<div id="bottom">Bottom Stuff</div>
</div>
#wrapper
{
height:700px;
background-color:teal;
position:relative;
padding-top:50px;
padding-bottom:50px;
}
#content {
height:700px;
background-color:red;
overflow:auto;
}
#top {
position:absolute;
top:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
#bottom {
position:absolute;
bottom:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
*granted, just because you use tables doesn't mean you're lazy. It's just often true. No offense intended.