Question

我有一个页面，我希望页面保持在页面顶部，页脚保持在底部，并且如果页面的内容多于允许的空间，则滚动到主内容区域中的内容进行滚动，但我不知道该怎么做。

HTML

    <header>
        <div id="headerContainer">
            <img src="images/logo.png" alt="" />
        </div><!-- END headerContainer -->

    </header>

    <div id="bodyContainer">

        <div id="products">
            <ul>
                <li><img src="images/mc1.png" alt="" /></li>
                <li><img src="images/mc1r.png" alt="" /></li>
                <li><img src="images/mc3.png" alt="" /></li>
                <li><img src="images/mc3e.png" alt="" /></li>
            </ul>
        </div><!-- END products -->

    </div><!-- END bodyContainer -->

    <footer>

        <div id="footerContainer">
        </div><!-- END footerContainer -->

    </footer>

CSS

header {
    width: 100%;
    height: 200px;
    background: #808284;
    background-image: -o-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -moz-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -webkit-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -ms-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: linear-gradient(to top, #58595b 0%, #808284 100%);
    border-bottom: 5px solid #d9b34d;
    box-shadow: 3px 0px 5px #0b0b0b;
}

#headerContainer {
    width: 1200px;
    margin: 0 auto;
}

#headerContainer img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
}

#bodyContainer {
    width: 1200px;
    margin: 0 auto;
}

footer {
    width: 100%;
    height: 100px;
    background: #808284;
    background-image: -o-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -moz-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -webkit-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -ms-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: linear-gradient(to top, #808284 0%, #58595b 100%);
    box-shadow: 3px 0px 5px #0b0b0b;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 1

尝试更改为：

footer {
  position: fixed; /* instead of absolute */
}

Answer 2

请参阅此answer，好像是您正在寻找的内容。并且在将来，请在提出问题之前搜索网站，看看是否已事先询问并解决了这个问题。

Answer 3

我刚刚为你创建了this。

.site-footer, .page-wrap:after {
    /* .push must be the same height as footer */
    height: 141px;
}
.site-footer {
    border-top: 1px solid #666;
    background: #eeeeee;
}

如何让页脚留在底部？

3 个答案: