Относительная ширина для макета CSS, фиксированная и жидкая смесь

Question

Я пытаюсь сделать макет чата следующим образом:

Теперь моя проблема в том, что я не уверен, как заставить контейнер контейнера занимать всю ширину и высоту (с допустимым типом документа), а затем увеличивать 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";
}