Log in

View Full Version : 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:




<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.


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

That is just what I would do until I could find a more permanent fix...:o 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&#37; and margin-top: 100px, I think, and apply overflow: hidden to the top of of the window, or a 100%&#215;100% container <div>.
Blake
03-01-2007, 08:04 PM
Thanks, that worked wonders Twey. If anyone else is interested, this works:



<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>
mburt
03-01-2007, 08:10 PM
Note that FireFox adds padding and margins when setting width to 100&#37;. So it may make the page scroll horizontally.
Twey
03-01-2007, 08:35 PM
Any design that depends on padding and margins should set them all to 0 by default anyway:
* {
padding: 0;
margin: 0;
}... since browser defaults differ.