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

Tagged as

Set height of a div to full screen

, 22 Nov 2011
Rate this:
Please Sign up or sign in to vote.
DescriptionS...

Description

Set height of a div to full screen using CSS

Code

<html>
<head>
<title>DIV with full screen height</title>
<style type="text/css">
  .Fullscreen
  {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Optional - just for DIV)*/
    border: solid 1px #000000;
    background-color:grey;
  }
</style>
</head>
<body>
<div class="Fullscreen">Hello world</div>
</body>
</html>

Browser Compatibility

I have tested this script in the following Web browsers:
  • Internet Explorer(8,9)
  • Mozilla Firefox(6)
  • Google Chrome(9)
  • Safari(5)
  • Opera(11)
EDIT
Note: The border causes scroll bars to appear. You can use 99 percent and set the body to be the same color as the div to make it look correct.
Thanks Steve.
 
For this issue, 2 fixes there. Do changes in the code like below.
 
1. Make the DIV borderless
border: solid 0px #000000;
or
border: none 1px #000000;
OR
 
2. Reduce the Width & Height values of DIV
width: 99%;
height: 99%;
That's all.

License

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

Share

About the Author

thatraja
Web Developer
India India
Programmer | Dude | ||||||
 
About him & his blog? check out here. Currently he's updating the site, he'll return soon there with more things*.
 
In Codeproject, he posted a blogpost & more than couple of Tip/Tricks, hope he'll write more soon.
 
Favorite techs are MVC, WCF, Mobile, HTML5, CSS3, jQuery, etc.,
 
His hobbies are watching movies, CP, being alone, etc., But now he's working on something*.
 
* - SCAMP???
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
Generalfor borderless, just border:none; is enough. Pinmembernanakhoa12-Dec-11 23:35 
GeneralRe: for borderless, just border:none; is enough. Pinmembertomicrow13-Jun-14 22:24 
GeneralReason for my vote of 1 this is a hacky solution. will behav... PinmemberGottZ23-Nov-11 1:05 
GeneralRe: I have tested this page. See browser compatibility. Pinmvpthatraja23-Nov-11 5:32 
GeneralNote: The border causes scroll bars to appear. You can use... PinmemberSteve Wellens22-Nov-11 1:33 
GeneralRe: Done Steve, please check it. Thanks. Pinmvpthatraja22-Nov-11 7:05 
GeneralAccepted the alternative. It works.. I have tested it.. To m... PinmemberB Birajdar15-Nov-11 2:10 

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 | Mobile
Web02 | 2.8.140827.1 | Last Updated 22 Nov 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid