css - 如果我在上面的 div 中使用 clearfix，页脚会在 Chrome 中吓坏

Question

如果我删除了页脚上方的 clearfix div，文本就会就位，就像在 Firefox 上一样。

但这会破坏其他事情。我不明白 clearfix 是如何影响页脚的...

我的页面：

http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx

Answer 1

它看起来像您的页脚元素，因为这些样式规则与之关联：

#footer {
    clear: both;
    font-size: 1.4em;
    height: 150px;
    margin-top: -150px;
    position: relative;
}

如果您删除该margin-top: -150px规则，Chrome 似乎会被清除。

在#content 样式中，您似乎有一条padding-bottom: 150px;规则将所有内容都推低了很多。可能也想减少一点。

如果您的目标是粘性页脚，出于某种原因，将margin-bottom: -150px;规则添加到#container元素中对我来说在 Firefox、Chrome 和 IE 中有效。但是，我认为它比 150px 高一点。

Answer 2

我最终在我的 clearfix div 下方添加了一个 .push div，使其高度为 180 像素（正确的高度，带有填充，而不是 150 像素）。不是语义的，但它似乎修复了 Chrome。