Header and footer fixed and content fills all space between - html

Question

I'm trying to create a layout for my site for a chat app. It needs to look something like this:
The point is that I don't want to body to scroll at all, just the chat area. My markup is as follows:
<div class="container">
<div class="header"></div>
<div class="chat"></div>
<div class="footer"></div>
</div>
Can anyone help?

Answer 1

Using fixed positioning, you can do something like this in your CSS.
Let's say the chat section division has "chat" as its ID and that the header and footer have an height of 200px.
.container .header {
position: fixed;
top:0;
left:0;
right:0;
height: 200px;
}
.container .chat {
position: fixed;
left:0;
right:0;
top:200px;
bottom:200px;
/* For Scrollbars */
overflow: auto;
}
.container .footer {
position: fixed;
bottom:0;
left:0;
right:0;
height: 200px;
}
Suggestion: you should use a "header" tag and a "footer" tag instead of "div" tags affected by css classes. Also, you should consider using absolute positioning instead of fixed positioning if you wrap the header, chat and footer inside a wrapper div so that the positions are relative to the wrapper and not the document. If you do so, don't forget to add a "position: relative" to the wrapper div.

Answer 2

The easiest thing to do is position everything absolutely, and have your main content area have an
header {
position: absolute;
height: 50px;
top: 0;
left: 0;
right: 0;
}
footer {
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
#main {
overflow: auto;
position: absolute;
top: 50px
left: 0;
right: 0;
bottom: 50px;
}
Like this: http://jsfiddle.net/cM277/