2 replies [Last post]
metford
Offline
newbie
Last seen: 10 years 32 weeks ago
Joined: 2009-04-10
Posts: 2
Points: 0

Hi,

Hopefully I can explain what I'm trying to accomplish.

Currently I have a layout in CSS that is 100% wide and 100% height.

I am trying to insert another "box", if you like, to display content in. I would like this to be 100% height as well. I want it to fill the gap between the "outer" DIVs header+footer.

So the "content" area fills 100% of the screen INSIDE the header+footer, which is also 100% of the screen. This diagram may help clarify a little.

As you can see, my "content" is only as high as the images, and it is not extending to the bottom of the screen. I would like the top and bottom of the "content box" to sit on the respective green bars, so it lines up neatly. This would then expand 100% of the screen, along with the "containing" div.

Hope this is clear enough.

My code follows, but be warned, it's not the greatest.

*
{
padding: 0;
margin: 0;
border: 0;
}
 
body, html 
{
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #818181; 
text-align: left; 
height: 100%;
}
 
div#container 
{
	position:relative;
	height:auto !important; 
	height:100%; /* IE6 */
	min-height:100%; 
}
 
div#header
{
	background-image: url(images/header_repeat.gif);
	background-repeat: repeat-x;
	height: 247px;
}
 
div#footer
{
	position:absolute;
	width:100%;
	bottom:0;
	background-image: url(images/footer_repeat.gif);
	background-repeat: repeat-x;
	height: 67px;
}
 
/* this is my "content box" */
div#content_container
{
	background-image: url(images/content_repeat.gif);
	background-repeat: repeat-y;
} 
 
div#content_header
{
	background-image: url(images/nav_bar.gif);
	background-repeat: no-repeat;
	height: 61px;
}
 
div#content_footer
{
	background-image: url(images/footer.gif);
	background-repeat: no-repeat;
	height: 67px;
	bottom: 0;
}

and the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS Site</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="container">
	<div id="header"></div>
	<div id="content_container">
		<div id="content_header"></div>
<!--page content goes here. I want this to expand to the bottom of the page.-->
		<div id="content_footer"></div>
	</div>
	<div id="footer"></div>
</div>
</body>
</html>

Thank you for any information.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Fake it. Its the background

Fake it. Its the background appearance that you want to be full height not the content. Google on faux columns for the full answer.

metford
Offline
newbie
Last seen: 10 years 32 weeks ago
Joined: 2009-04-10
Posts: 2
Points: 0

this does seem a much

this does seem a much simpler method, not sure why i didn't think of it first. :blushing:

will try that and see how things turn out.

thank you