...

View Full Version : Make a z-indexed div fill its parent



spetsacdc
02-20-2009, 01:48 AM
Hello, I have a page with 3 divs/rows: header, body, and footer. None have a height specified. I also have a div called "overlay". I am trying to get overlay to fill only the body div. Overlay has a z-index and transparency effect.

I just can't get it to only fill the body div. I has the height of the entire page and causes a vertical scroll bar because it starts below the top of the page. Is this possible without specifying the height of the body div?

This is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Z-index problem</title>
<style type="text/css">
@charset "utf-8";
div{
overflow:hidden;
}

body{
margin:0px;
}
#the_header{
background:#330099;
}
#the_body{
background:#993300;
}
#the_overlay{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
#the_footer{
background:#99CC33;
}

</style>
</head>
<body>
<div id="the_header">
<img src="test.gif" style="height:100px; width: 100px;" />
</div>
<div id="the_body">
<div id="the_overlay">
</div>
Testing...<img src="test.gif" style="height:150px; width: 150px;" />
</div>
<div id="the_footer">
This is the footer <img src="test.gif" style="height:15px; width: 200px;" />
</div>
</body>
</html>


Thanks :)

BoldUlysses
02-20-2009, 04:55 AM
I just can't get it to only fill the body div.

Try this:


#the_body{
background:#993300;
position:relative;
}

That should make the underlay div reference its position and percentage dimensions off its parent div (#the_body) and not the browser window.

spetsacdc
02-20-2009, 05:16 AM
thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum