頁腳不在頁面底部

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;屬性。那些爲他們的孩子元素設定基調是相對於他們而不是窗口。如果沒有位置聲明，子元素會將自己定位到具有相對位置的最高元素，這就是窗口本身。