バックグラウンド コンテナ「background-overlay」と「background-gradient」がドキュメントの高さを、表示されるコンテンツをはるかに超えて押し上げている理由を突き止めようとしています。ここで何が起こっているのかわかりません。おそらく単純すぎる何か。
これが作業中のテンプレートですhttp://jordan.rave5.com/tmp/
コードの問題が何であるかはわかりませんが、前述の 2 つのクラスに関係があると思います。
考えられる犯人:
#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>