Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

Set height of a div to full screen

4.50/5 (2 votes)
23 Nov 2011CPOL 9.8K  
blahhtml, body { height: 100%; width: 100%; padding: 0; margin: 0;}#derpy { height: 100%; width: 100%; background-color: #123456;} derpNo...
HTML
<!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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)