html - 为什么我的 100% 高度 waaay 超大？

Question

我试图找出为什么我的背景容器“background-overlay”和“background-gradient”将文档的高度推得远远超出显示的内容？我不确定这里发生了什么。可能是太简单了。

这是工作中的模板 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>

Answer 1

删除 margin-top:100% 在你的#footer-content id