CSS：在页面底部使用浮动作为页脚膨胀，如 Quora

Question

我想在底部有一个页脚。一开始，我用position: fixed

.page-foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #F6F6F6;
    height: 400px;
    border-top: 1px solid #eee;
}

但是使用这种方式，我遇到了一些问题，例如在 Chrome 开发人员工具上进行调试，我看不到 html 文件的其他部分，因为我的页脚很大。

我研究了他们的源代码，看到 Quora 页面使用 float 如下

.page-foot {
    float: left;
    position: relative;
    border-top: 1px solid #eee;
    background: #f6f6f6;
    width: 100%;
    min-width: 1020px;
    height: 400px;
}

这是我可以使用 Chrome 开发人员控制台调试页脚的示例图像：

当我缩小页面时，页脚仍然在页面底部：

这个方法可以解决上面的问题（调试的时候可以滚动到其他部分）。但如果其他内容（如页眉+主要内容）足够，页脚就位于页面下方space，此页脚会遮挡主要内容的部分内容。

我看到Quora没有遇到这个问题。他们的页脚总是在底部，没有覆盖主要内容。

我想知道他们是怎么做到的？

谢谢:)

Answer 1

您需要给您的内容区域 padding-top 等于 header 的 高度，padding-bottom 等于页脚的高度。

CSS：在页面底部使用浮动作为页脚膨胀，如 Quora

CSS: using float for footer bloat at bottom of page as Quora

html

css

quora