html - Why is my 100% height waaay oversized? -
i'm trying track down why background containers "background-overlay" , "background-gradient" pushing height of document beyond content displayed? i'm not sure what's going on here. simple.
here template in work http://jordan.rave5.com/tmp/
i'm not sure code problem think 2 aforementioned classes.
possible culprits:
#background-overlay { z-index: 100; width: 100%; height: 100%; margin: 0; padding: 0; background-color: #273722; background-image: url(images/main-bg.png); background-repeat: repeat; background-attachment: fixed; opacity: 0.0; top: 0; bottom: 0; } #background-gradient { position: fixed; z-index: 200; width: 100%; height: 100%; margin: 0; padding: 0; background-image: url(images/main-grad.png); background-repeat: repeat-x; background-position: top; top: 0; bottom: 0; overflow: auto; }
html
<div id="background-overlay"> <div id="background-gradient"> <div id="header-image-grad"> <div id="header"> <div id="header-container"> <div id="navigation-container"> <div id="navigation"> <span id="nav">navigation area...</span> </div> </div> </div> </div> <div id="header-image-border"> <img class="header-img" src="slides/fields.jpg" alt="panoramic fields" /> <div class="image-grad"></div> </div> </div> <div id="body"> <div id="body-content"></div> <div class="loading"><img src="images/loading.gif" alt="loading content" /></div> </div> <div id="footer"> <br /> <div id="footer-content"> footer area... </div> </div> </div> </div>
remove margin-top:100%
in #footer-content id