Is there a method I can use for a div to extend to full height? I've got a sticky footer in it as well.
Here's the web page: Website removed. The middle bit I'm talking about is the white div, midcontent which has CSS values:
.midcontent{
width:85%;
margin:0 auto;
padding:10px 20px;
padding-top:0;
background-color:#FFF;
overflow:hidden;
min-height:100%;
max-width:968px;
height:100%;
}
So yes, obviously height:100% didn't work. Additionally, ALL parent containers have height set.
Here's the general structure
<body>
<div id="wrap">
<div id="main">
<div class="headout">
<div class="headimg"></div>
</div>
<div class="midcontainer"></div>
</div>
</div>
<div id="footer">
<div class="footer"></div>
</div>
Answer
Did you remember setting the height of the html and body tags in your CSS? This is generally how I've gotten DIVs to extend to full height:
<html>
<head>
<style type="text/css">
html,body { height: 100%; margin: 0px; padding: 0px; }
#full { background: #0f0; height: 100% }
</style>
</head>
<body>
<div id="full">
</div>
</body>
</html>