Question

我在页脚下面有很多空间，这是我真正想要摆脱的东西。出于某种原因，此空间仅显示在Google Chrome中，而不会显示在Firefox中。

图片展示了它。

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

任何建议都将不胜感激。

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％高度，然后告诉页脚位置到底部的默认页面流量＆＃39;父容器。请注意position: relative;和primary定义上的html, body属性。那些为他们的子元素设置了相对于他们而不是窗口的基调。如果没有位置声明，子元素会将自己定位到具有相对位置的最高元素，这将是窗口本身。

页脚不在页面底部

1 个答案: