Question

我正在构建一个轻量级的聊天网页。然而，页脚正在其他元素的前面。 CSS代码：

#page_content {
   margin-left: 15px;
   margin-bottom: 20px;
}
#footer {
   background: rgba(0, 0, 0, 0.980392);
   width: 100%;
   height: 80px;
   position: relative;
}

这里有一个例子：http://jsfiddle.net/6BrjV/谢谢你的帮助。

Answer 1

尝试清除花车：

#footer {
    background: rgba(0, 0, 0, 0.980392);
    width: 100%;
    height: 80px;
    position: relative;
    clear:both;
}

<强> jsFiddle example

Answer 2

将其添加到页面：

#page {
    overflow: hidden;
    clear: both;      /* I would recommend this after floating elements */
}

Answer 3

你可以将它添加到底部。使用这个CSS：

html, body {
    height: 100%;
}

#page_content {
    margin-left: 15px;
    margin-bottom: 20px;
}
#footer {
    background: rgba(0, 0, 0, 0.980392);
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
}

这是小提琴：http://jsfiddle.net/rj8tt/

Answer 4

这是因为#page_content正在折叠，因为子元素正在浮动，因此从文档流中删除。

将overflow:hidden添加到#page_content，从而强制父级包含子元素。

jsFiddle example

#page_content {
    margin-left: 15px;
    margin-bottom: 20px;
    overflow: hidden;
}

Answer 5

看起来你正在使用一些内联样式来浮动一些元素。我输入了一个简单的micro-clearfix hack，看看它做了什么，它看起来应该可以解决你的问题。看看：http://jsfiddle.net/6BrjV/5/

div:before, div:after {
    content: '';
    display: table;
}
div:after {
    clear: both;
}

页脚阻碍其他元素

5 个答案: