页脚不在pf页面底部

Question

我在页脚下有很大的空间，这是我真的想摆脱的东西。由于某些原因，这个空间只出现在Google Chrome中，而不出现在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;属性。它们将其子元素的基调设置为相对于它们而不是窗口。如果没有位置声明，子元素会将自己定位到具有相对位置的最高元素，即窗口本身。