DIV to fill page with header height excluded

I have been searching for 2 hours now and every solution I have found does not work. The design can be found here: <snip>. I have a header and then a vertical navigation pane on the left and a scrollable div on the right. I need the vertical navigation pane and scrollable div to fill the remainder of the page. ie. 100% - 125px(Height of header). Any help or input is be greatly appreciated.

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design</title>
<link rel="stylesheet" type="text/css" href="includes/design.admin.css" />
</head><body>
<div id="design">
<div id="design-header">
<div id="design-title">
<h1>Design</h1>
<h4>A subtitle</h4>
</div>
<div id="design-hnav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>
<div id="design-container">
<div id="design-vnav">
<ul>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
<div id="design-powered">Powered by Content</div>
</div>
<div id="design-content">
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
Content<br />Content and some more<br />Content<br />Content and some more<br />Content<br />Content and some more<br />
</div>
</div>
</div>
</body>
</html>

CSS:


@charset "utf-8";
/* Design Admin */html
{
height:100%;
}
body
{
height:100%;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
#design
{
width:100%;
height:100%;
margin:0;
padding:0;
}
/* Design Header */
#design-header
{
width:100%;
height:125px;
background-color:#666;
}
#design-title
{
height:80px;
}
#design-title h1
{
margin:0;
padding:0;
color:#FFF;
padding-left:20px;
padding-top:10px;
}
#design-title h4
{
margin:0;
padding:0;
color:#FFF;
font-size:12px;
padding-left:20px;
}
#design-hnav
{
height:45px;
width:100%;
background-color:#111;
}
#design-hnav ul
{
height:45px;
list-style:none;
margin:0;
padding:0;
}
#design-hnav li
{
display:inline;
float:left;
height:100%;
width:100px
}
#design-hnav a
{
display:block;
text-decoration:none;
color:#FFF;
height:33px;
width:100%;
text-align:center;
padding-top:12px;
}
#design-hnav a:hover
{
background-color:#333;
}
/* Design Container */
#design-container
{
height:100%;
}
#design-vnav
{
background-color:#333;
width:250px;
height:100%;
float:left;
}
#design-powered
{
color:#999;
font-size:11px;
text-align:center;
}#design-content
{
margin-left:250px;
overflow:auto;
height:100%;
}

[edited by: swa66 at 2:38 pm (utc) on Feb. 14, 2009]
[edit reason] No personal URLs, please see ToS [/edit]

DIV to fill page with header height excluded

woody993

swa66

woody993

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week