Set height of a div to full screen

thatraja

4.81/5 (10 votes)

22 Nov 2011CPOL

55.1K

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

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

CSS

border: solid 0px #000000;

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)