CSS布局的相對寬度，固定混合

Question

我正在嘗試進行如下聊天室布局：

現在我的問題是，我不確定如何使容器框占據整個寬度和高度（具有有效的doctype），然后在窗口增大時保持居中的div不變，從而使居中的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";
}