Adding/subtracting dimensions?

**Blake** · 03-01-2007, 06:40 PM

Suppose I make a web with a header 100 pixels high, and I want the content of the page to fill the rest of the window; ie I have the following:

Code:

<html>
<head>
<style type="text/css">

.header
{
     width: 100&#37;;
     height: 100px;
}

.content
{
     width: 100%;
     overflow: auto;
}
</style>
</head>
<body>

<div class="header">

Header here

</div>

<div class="content">

Content here

</div>
</body>
</html>

Now, I want the content to be 100 pixels less than the full height of the window. Is there a way to do that without using javascript?

Setting the height to 100% doesn't work; that makes the div extend 100 pixels beyond the bottom of the window.

**GhettoT** · 03-01-2007, 07:08 PM

Well, the easy fix yet sort of difficult fix would to manually set a height...
ie.

Code:

.content
{
     width: 900px;
     overflow: auto;
}

That is just what I would do until I could find a more permanent fix...

Sorry I couldn't be of more help.

**Twey** · 03-01-2007, 07:16 PM

That's not a fix, since it won't work unless the window is exactly 1000px high.

The best way to do it is to set height: 100% and margin-top: 100px, I think, and apply overflow: hidden to the top of of the window, or a 100%×100% container <div>.

**Blake** · 03-01-2007, 08:04 PM

Thanks, that worked wonders Twey. If anyone else is interested, this works:

Code:

<html>
<head>
<style type="text/css">

body
{
	overflow: hidden;
	padding: 0px;
	margin: 200px 0px 0px 0px;
}

.header
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100&#37;;
	height: 100px;
}

.content
{
	width: 100%;
	height: 100%;
	overflow: auto;
}
</style>
</head>
<body>

<div class="header">

Header here

</div>

<div class="content">

Content here

</div>
</body>
</html>