DIV with child DIVs and how to manage the height/width

HTML & CSS
8

And what dimensions might that space be?

We are presuming that your page will adjust to fit most devices (RWD). If you assign fixed widths and/or heights (a limited area for content), some devices will be excluded, ie: content will be lost.

Either write the page with a sticky footer or a normal footer (as I posted below), or with the ability to spawn scrollbars as needed (as coothead and Paul posted).

<!doctype html>
<html>
<head>
<title>Example</title>
<style type="text/css">
html, body {
    padding:0;
    margin:0;
}
#container {
    border:1px solid #555;
}
#titlebar {
    height:35px;
    padding:2px;
    background-color:#faa;
}
#content {
    background-color:#afa;
    overflow:hidden;
}
#statusbar {
    height:50px;
    padding:2px;
    background-color:#aaf;
}
</style>
</head>
<body>
<div id="container">
    <div id="titlebar">Testing</div>
    <div id="content">
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
        <p>This is content.</p>
    </div>
    <div id="statusbar"></div>
</div>
</body>
</html>