为什么我的100％身高超大？

我想追查为什么我的背景容器“background-overlay”和“background-gradient”正在推动文档的高度远远超出显示的内容？我不确定这里发生了什么事。可能太简单了。为什么我的100％身高超大？

这里是工作http://jordan.rave5.com/tmp/

模板我不知道该代码是什么问题，我认为是与上述两个类别。

可能的罪魁祸首：

  #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>

来源

2013-04-25 WASasquatch