html - 页脚阻碍其他元素

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 示例

Answer 2

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

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

Answer 3

将此添加到页面：

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

Answer 4

你可以把它钉在底部。使用这个 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 5

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

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

jsFiddle 示例

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