爲什麼我的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