div with heigth that fills the page - html

Question

Unfortunately, I have always the same problem with heigths of divs.
I want that my div (If the content is minimum) fills the monitor. Otherwhise, if the content exceed the page I use the scrollbar (overflow:scroll) and this part is ok.
My page is composed like this:
<div id="container">
<div id="header"> ...</div>
<div id="navigation"> ... </div>
<div id="content"> ...
<div id="testo"></div>
</div>
I would like that the div content match the heigth of the page of the browser.
If you watch this example http://jsfiddle.net/EBnD2/
you can understand what is my problem.
thanks in advance!

Answer 1

Here's a script driven solution:
And the script that does the trick (I've used jQuery for convenience. Feel free to resort to pure javascript, if necessary :
$(document).ready(function () {
$("#content").css("height",
(
$(document).outerHeight()
- $("#header").outerHeight()
- $("#navigation").outerHeight()
- $("#footer").outerHeight()
- parseInt($("#content").css("padding"))) + "px");
});
Here's the updated style definitions:
html {
}
body {
min-width: 1150px;
overflow: auto;
background-color: pink;
margin: 0px;
}
#container {
margin: 0 100px;
background: #fff;
border-top: 1px solid grey;
font-family: sans-serif;
}
#header {
text-align:center;
background: #ccc;
padding: 20px;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
#header h1 {
margin: 0;
}
#testo {
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 18px;
line-height: 30px;
text-transform: uppercase;
color: #444;
}
p.sx {
text-align: left;
}
p.cx {
text-align: center;
}
p.dx {
text-align: right;
}
#navigation {
float: left;
width: 100%;
background: #CC3366;
font-weight: bold;
font-size: 90%;
font-size-adjust: inherit;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
}
#navigation li a {
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover {
background: #993366;
}
#navigation li a.selected {
background: grey;
}
#content {
background-color: white;
border-left: 1px solid grey;
border-right: 1px solid grey;
padding: 20px;
}
#content h2 {
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer {
border: 1px solid grey;
background: #ccc;
text-align: right;
padding: 20px;
}