Question

I am trying to make a chatroom layout like the following:

Now my problem is that I am not sure how to have the container box occupy the whole width and height (with valid doctype) and then make the center div grow if the window grows keeping the rest constant.

i am well aware of js/css. so i just need some beginning guideline. i would like to avoid javascript to process and then set heights and widths.

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

and 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> 

That is it if that is what you seek

or use the following JavaScript to find out the height and assign it to your container :

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