Javascript CSS布局的相对宽度，固定和流动混合

我正在尝试制作一个聊天室布局，如下所示：

现在我的问题是，我不知道如何让容器框占据整个宽度和高度（使用有效的doctype），然后在窗口保持不变的情况下使中心div增长

我非常了解js/css。所以我只需要一些开始指南。我希望避免使用javascript进行处理，然后设置高度和宽度。

body，html{
身高：100%；
保证金：0；
填充：0；
}
#容器{
身高：100%；
高度：自动！重要；
保证金：0自动；
最小高度：100%；
位置：相对位置；
宽度：100%；
}
.标题{
显示：块；
高度：100px；
宽度：100%；
}
.身体左侧{
浮动：左；
宽度：70%；
}
.身体权利{
浮动：对；
宽度：30%；
}
.清楚{
明确：两者皆有；
}
.页脚{
浮动：左；
宽度：70%；
}

和HTML

<div id="container">
    <div class="header"></div>
    <div class="body-left"></div>
    <div class="body-right"></div>
    <div class="clear"></div>
    <div class="footer"></div>
</div> 

---

@Alec Smart您可以相应地更改它，这只是一个示例，我更新了关于高度100%部分的问题，并添加了容器divThan do body right{width:150px；float:right}body left{margin right:150px；}

function getWindowHeight() {
    var windowHeight = 0;

    if (typeof(window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }

    return windowHeight;
}

window.onload = init;

function init() {
    document.getElementByID("container").style.height = getWindowHeight() + "px";
}