页脚不在页面底部

Question

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

继承人显示它的图像。

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

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

任何建议，将不胜感激。

Answer 1

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

的jsfiddle：

假设根本问题是我以前的假设，以实现所谓的粘页脚，实现以下到您现有的网页structions造成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％高度，然后将页脚位置的默认页面流量告知其父容器的底部。请注意0​​和html, body定义中的position: relative;属性。那些为他们的孩子元素设定基调是相对于他们而不是窗口。如果没有位置声明，子元素会将自己定位到具有相对位置的最高元素，这就是窗口本身。