Set height of a div to full screen

thatraja

4.81/5 (9 votes)

Nov 14, 2011

CPOL

55059

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

Steve Wellens wrote[^]:
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;

border: none 1px #000000;

OR 2. Reduce the Width & Height values of DIV

width: 99%;
height: 99%;

That's all.