100% DIV Height problem

I'm having a little trouble with a background DIV that I need to be at 100% in height. As you can see with the code below, the background is yellow. When I have a very long DIV (narrowcolumn in the example) then instead of being 100% it just cuts off half way down the page. I thought by including a 100% height on the body that this would work but it doesn't! Any ideas or help would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<style type="text/css">
body {
color: #000;
text-align: center;
margin: 0 0 20px;
padding: 0;
height: 100%;
width: 100%; 
}

#background-container {
z-index: -1;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
position: absolute;
left: 0;
top: 0;  
}

#background {
z-index: 0;
left: 0;
top: 0;
overflow: hidden;
text-align: right;
width: 100%;
height: 100%;
background-color: yellow;
} 

.narrowcolumn {
padding: 0 36px;
margin: 0;
width: 560px;
height: 2000px;
background: red;
position: relative;
line-height: 80px;

}
</style>
 <title></title>
</head>
<body>
 <div id="background-container">
 <div id="background">
  this is the background that doesn't go to 100% height and should
 </div> 
 </div>
 <div class="narrowcolumn">
this is a very long column
</div>
</body>
</html>

100% DIV Height problem

greencode

GrafixGuru

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week