Click here to Skip to main content
15,867,488 members
Articles / Programming Languages / Javascript
Alternative
Tip/Trick

Set height of a div to full screen

Rate me:
Please Sign up or sign in to vote.
4.81/5 (10 votes)
22 Nov 2011CPOL 53.5K   2   7
DescriptionS...

Description


Set height of a div to full screen using CSS

Code


HTML
<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
CSS
border: solid 0px #000000;

or
CSS
border: none 1px #000000;

OR

2. Reduce the Width & Height values of DIV
CSS
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)


Written By
Team Leader
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

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

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

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