Set height of a div to full screen
blahhtml, body { height: 100%; width: 100%; padding: 0; margin: 0;}#derpy { height: 100%; width: 100%; background-color: #123456;} derpNo...
<!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>
derp
</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.