Click here to Skip to main content
Click here to Skip to main content
Alternative Tip/Trick

Tagged as

Set height of a div to full screen

, 23 Nov 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
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>
  <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)

Share

About the Author

GottZ
Software Developer
Germany Germany
i r codin c for food
Follow on   Twitter

Comments and Discussions

 
GeneralReason for my vote of 5 excelelnt alternative.. Accepting it... PinmemberB Birajdar23-Nov-11 1:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150414.1 | Last Updated 23 Nov 2011
Article Copyright 2011 by GottZ
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid