<!DOCTYPE html>
<html>
<head>
<title>blah</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#derpy {
height: 100%;
width: 100%;
background-color: #123456;
}
</style>
</head>
<body>
<div id="derpy">derp</div>
</body>
</html>
No JavaScript was needed at all...
However, it is important to set the height of the body / HTML and to use a proper doctype to turn every browser into the "good" rendering mode.
Why have I set the padding and margin of the HTML and body to 0 is explained: some browsers would render this code without it with scrollbars where you can basicly scroll some pixel down and right.
I have lots of experience in writing dynamic resolution full window applications. That is where this experience comes from.
I successfully have tested this now in following browsers: Microsoft Internet Explorer 4.01 (4.72.3110.0), Mozilla Firefox 3.0.3 and most Major Browsers.
The fact alone that it runs in IE 4 should be proof enuf that this is a charm.
