Question

可能重复：
How to force a DIV block to extend to the bottom of a page, even if it has no content?

过去几天我一直在阅读，但还没有解决方案。

我正在用简单的旧HTML编写一个网站，看起来页脚不想扩展到页面底部。我一直在测试，但仍然没有结果。

以下是代码段。

<div id="footer">
        <div id="footer_content">
            <p> &copy; 2011 KRG Maintenance - All Rights Reserved - Contact Us</p>
        </div> <!--footer content ends-->
    </div> <!--footer ends-->
</body>
</html>

body{
    position:relative;
    background:#383d43 url(../images/body_bg.jpg) repeat-x;
    color:#000;
    font:62.5% Myriad Pro,Arial,sans-serif;
}
#footer{

    width: 100%;
    float: left;
    clear: both;
    height: 100%;
    background-color: #ffffff;
    background: #1e2329 url(../images/footer_bg.jpg) repeat-x;

}

#footer_content{

    margin: auto;
    width: 943px;
    padding: 17px 17px 0px 0px;
}

我是页脚延伸到页面底部的页脚，但它只是悬挂在它下方的空白区域。我真的很困惑，似乎其他解决方案没有修复它。任何帮助将不胜感激。

Answer 1

罗伯特哈维的第一个链接看起来很好：确保身体本身足够大，以便让<div>做你想做的事。

因此，您height: 100%的{{1}}应该会帮助您。

Answer 2

#footer{
display: block;
width: 100%;
float: left;
clear: both;
height: 100%;
background-color: #ffffff;
background: #1e2329 url(../images/footer_bg.jpg) repeat-x;
}

页脚未扩展到网站页面底部

2 个答案: