Making a DIV 100% of the Document Height

A friend told me that IE 8 is supposed to be fully compliant with CSS. I went to test a website on Browsershots the other day and discovered that it didn't work in IE 7 or 8. So much for compliance. The problem I have is that the height of my main div is set to 100% but it only goes part way down the page and then ends while its content continues. Its a bit difficult to explain so hopefully it will make more sense if you look at the image on the left.
The white background is supposed to go to the end of the page, since all of the other page elements are enclosed in it.

The Solution
I couldn't find a way to fix this problem using CSS/HTML alone. Instead I had to use a piece of javascript to resize the div to the actual height of the page.

<script type="text/javascript">
function resize()
{
document.getElementById('maindiv').style.height =
document.body.parentNode.scrollHeight + 'px';
}
</script>

Just let your body tag know that it should run the resize function onload and the result in IE 7 and 8 is as follows: