Question

无法弄清楚为什么我的页脚没有坐在我的“容器”DIV中。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
</head>

<body>

<div id="container">

    <div id="innerContainer">
        <div class="leftcol">
        </div><!--/leftcol-->                                   


        <div class="centercol-home">
        </div><!--/centercolHome-->


    </div><!--/innercontainer-->


    <div class="footer">
     </div>    
</div><!--/container-->

</body>
</html>

我在“容器”上有一个3px的边框，但我可以看到页脚坐在容器顶部，而不是在... ...

这是CSS：

html {
    font-family: Arial, sans-serif;
    height:100%;  
}


body{
    margin: 0 auto;
    padding: 0; 
    font-size: 12px;
    height:100%;
    /*min-width:995px;*/
    background:url(/_images/body-bg.jpg) top center no-repeat;

}

#container {
    width:995px;
    margin: 0 auto;
    padding: 0;
    height:100%;
    position:relative;
    background:#fff;
    border:3px solid #0068b3;
}



/* IE6 */
* html #container {
    height:100%;
}

#innerContainer {
    width:985px;
    min-height:100%;
    padding:0 5px 5px 5px;
    margin:0 0 25px 0;
    /*float:left;*/
    background:#fff;
}

.footer {
    clear:both;
    float:left;
    width:974px;
    text-align: center;
    /*bottom:0;*/
    padding-top:5px;
    padding-bottom:5px;
}

Answer 1

从min-height

中删除#innerContainer

Answer 2

另一种方法是将float:left;添加到#container。

问题是#container没有浮动，因此处于正常页面“流程”中。这允许.footer“浮动”在#container之上和之外。如果您同时浮动#container，则.footer应显示在您预期的位置。

您可能还需要浮动所有“容器”div，包括#container，.footer和#innerContainer。

CSS / HTML - 页脚未正确定位

2 个答案: