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

Question

我正在尝试制作如下的聊天室布局：

现在我的问题是我不知道如何让容器盒占据整个宽度和高度（使用有效的doctype），然后在窗口增长时使中心div增长，保持其余部分不变。

我很清楚js / css。所以我只需要一些开端指南。我想避免javascript处理，然后设置高度和宽度。

Answer 1

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    height: 100%;
    height: auto !important;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    width: 100%;
}
.header {
    display: block;
    height: 100px;
    width: 100%;
}
.body-left {
    float: left;
    width: 70%;
}
.body-right {
    float: right;
    width: 30%;
}
.clear {
    clear: both;
}
.footer {
    float: left;
    width: 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> 

如果那就是你想要的那就是它

或使用以下JavaScript查找高度并将其分配给容器：

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