html - 如何使页脚停留在底部？

This question already has answers here:

Fixed header, footer with scrollable content
                                
                                    （6个答案）
                                
                        
                                5个月前关闭。
            
                    
我有一个页面，我希望页眉停留在页面顶部，页脚停留在页面底部，如果页面内容超出空间允许，则放置在主要内容区域中的内容可以滚动，但是Im不知道如何去做。

的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;
}

最佳答案

尝试更改为：

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