왜 내 100 % 높이가 너무 큽니까?

내 배경 컨테이너 인 "배경 오버레이"와 "배경 그라디언트"로 인해 표시된 내용을 넘어서 문서의 높이가 올라간 이유를 추적하려고합니다. 나는 여기서 무슨 일이 일어나고 있는지 잘 모르겠습니다. 아마 너무 간단합니다. 여기 왜 내 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