css - 页脚不在页面底部

Question

我在页脚下有很多空间，这是我真正想摆脱的东西。由于某种原因，这个空间只出现在谷歌浏览器中，而不会出现在 Firefox 中。

这是一张展示它的图片。

http://puu.sh/a6XQI/ec07f0ba31.jpg

我希望发生的是我的内容根据屏幕大小调整大小。我不确定我是否可以这样做，因为我没有太多内容，只有几张图片。

如有任何建议，我们将不胜感激。

Answer 1

由于您没有提供任何代码，我认为这与您的页面内容的高度短于窗口高度有关。许多具有打印设计背景的人常常对页脚不会自动出现在页面底部的概念感到困惑。动态大小元素的位置取决于它们的内容，正如您可能会发现的那样，当客户希望在提供任何内容之前构建网站时，这会非常令人沮丧。但我离题了。

假设根本问题是由我之前的假设引起的，要实现所谓的粘性页脚，请对现有页面结构实现以下操作:

jsFiddle:http://jsfiddle.net/63mp6/

HTML

<div class="primary">
    <div class="header">
        Header Content
    </div>
    <div class="content">
        Main body Content
    </div>
    <div class="footer">
        Footer content
    </div>
</div>

CSS

*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html, body {
    position: relative;
    width: 100%;
    height: 100%;
    background: #eee;
}
.primary {
    position: relative;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}
.header{
    min-height: 100px;
    min-width: 100%;
    background: #aaa;
}
.content {
    min-width: 100%;
    min-height: 200px;
    background: #fff;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 100px;
    background: #666;
}

此处发生的事情是您将默认样式重置为父容器，将它们强制为窗口的 100% 高度，然后将默认页面流的页脚位置告知其父容器的底部。请注意 primary 和 html, body 定义中的 position: relative; 属性。那些为他们的子元素设置基调是相对于他们而不是窗口。如果没有位置声明，子元素会将自己定位到具有相对位置的最高元素，即窗口本身。