# Solved: Setting An Element To Maximum Screen Height



## blujein (May 13, 2008)

G'day,

I have the following CSS code that controls my 'container' element on my HTML page, but I'd like the element to have 100% width of the screen even though the content doesn't take it down the page that far. I've tried using 'height:100%;', but with no luck.


```
DIV.GlobalContainer
	{
	background-color:#ffffff;
	border-bottom:0px;
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;
	border-top:0px;
	display:block;
	padding-bottom:40px;
	padding-left:40px;
	padding-right:40px;
	padding-top:10px;
	position:relative;
	width:820px;
	}
```
If anyone can help me, I'd greatly appreciate it!


----------



## tomdkat (May 6, 2006)

If you use absolute positioning and setting height to 100%, the element will have the full height of the containing element,in this case the body element. So, set the body element to have a height of 100% as well and see how that works for you.

Here is a test case I worked up:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Full height DIV</title>
  <style type="text/css">
body {
  height: 100%;
  margin-top: 0px;
  padding-top: 0px;
  padding-left: 0px;
  margin-left: 0px;
}
.full-height {
  border-style: solid;
  border-color: #cc0000;
  display: block;
  width: 820px;
[b]  height: 100%;[/b]
  background-color: #ccccff;
[b]  position: absolute;[/b]
}

  </style>
</head>
<body>
<div class="full-height">
<p>This is some text</p>
</div>
</body>
</html>
```
Using your CSS above, I would make these changes:

```
DIV.GlobalContainer
	{
	background-color:#ffffff;
	border-bottom:0px;
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;
	border-top:0px;
	display:block;
	padding-bottom:40px;
	padding-left:40px;
	padding-right:40px;
	padding-top:10px;
[b]	position:absolute;[/b]
	width:820px;
[b]   height: 100%;[/b]
	}
[b]
body {   height: 100%; }
[/b]
```
When using absolute positioning, the padding you have specified will still be applied but your ability to automatically center that element on the page goes away. So, if you want it full height AND centered, more work will be needed, possibly including some JavaScript to dynamically reposition the left margin of the element based on the current width of the browser's viewport (the part of the browser window that has the page displayed in it).

Anyone else have any other ideas?

Peace...


----------



## blujein (May 13, 2008)

Perfect! Thank you for your help!


----------

