Menu
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> 
524
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>
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
