只能使頁腳停留在底部

當HTML頁面包含少量內容時，頁腳有時可能會坐在頁面的中間位置，在下面留下空白區域。這看起來很糟糕，特別是在大屏幕上。經常要求網頁設計師將頁腳向下推到視口的底部，但是如何做到這一點並不明顯。只能使頁腳停留在底部

我有HTML結構是這樣的：

<html> 
    <body> 
    <div class="wrapper"> 
     .... 
    </div> 
    <div class="footer" id="cdFooter"> 
     ....... 
    </div> 
    </body> 
</html>

我想互聯網說，設置的CSS規則是這樣

html,body { 
    position: relative; 
    min-height: 100%; 
} 

.wrapper { 
    min-height:100%; 
    position: relative; 
    overflow:hidden !important; 
} 
.footer { 
    bottom: 0; 
    width: 100%; 
}

（其他一些CSS規則，你可以在以下網址看到，我不能在這裏放太多的代碼。）

但是如果您使用大屏幕桌面，頁腳仍然不在瀏覽器的底部。你可以看到這個網址的結果：http://dev.xinruima.me/readistep/

有人說，我需要設置包裝有一個像margin-bottom：** px的規則，但這不適用於我的網站。

有人可以看看我的網址看有沒有辦法解決這個很好？我希望它能夠響應，所以我可能不會使用固定的高度來推動元素或類似的東西。

謝謝。

如果我使用position：absolute，它會覆蓋包裝。 我也使用body {height：100％}，它不適合我。有人可以嘗試在我的網址上進行修改嗎？

我認爲問題是，如果我們可以使身體的高度與瀏覽器高度一樣高達100％，就像html一樣，它會解決問題，希望如此。

來源

2014-07-17 Xinrui Ma

我認爲你正在尋找[sticky footer]（http://ryanfait.com/sticky-footer/） – HJ05

它位於頁面的最底部：http://jsfiddle.net/hvNg2/2 /你是否希望它始終保持在屏幕上？ – BuddhistBeast

這不是如果你的包裝裏面沒有足夠的內容@BuddhistBeast –

您沒有指定應如何顯示頁腳。您還需要更改身體元素的高度：

body { 
    height: 100%; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

來源

2014-07-17 19:39:27

如果我使用position：absolute，頁腳會彈出並覆蓋包裝。 –

您的身體元素存在問題。我更新了我的答案。 –

您必須將其排除正常流量並修復位置。這種添加到您的頁腳

position: absolute;

爲其他控件，您可以添加

top:

要控制頁腳的高度。

編輯：你重疊的原因可能是因爲你的包裝沒有定義的高度，所以它重疊包裝，因爲高度是未定義的，因此從頂部開始。

另一種方法是在包裝上定義絕對位置，然後使用頂部和底部來控制高度。

編輯：從所有屬性中刪除最小高度。你不需要它。這只是搞亂了其他塊元素。

min-height: 100%

試試這個。

.wrapper { 
    position: relative; 
    overflow: hidden 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

下面是在包裝和頁腳上都使用絕對定位的示例。 http://jsfiddle.net/mLRq3/

不要考慮「身高身高爲瀏覽器高度的100％」，不管身體或瀏覽器身高如何，都可以考慮在底部附加頁腳。這樣，瀏覽器的高/大/小/寬無關緊要，因爲你總是從底部開始。

來源

2014-07-17 19:41:51 Aaron

是的，但是即使我爲我的warpper設置了一個固定的高度，它也不起作用。有些事情一定是錯的。 –

您是否在包裝上刪除了最小高度：100％？從你提供的方式來看，如果你想在下面堆疊頁腳，你的代碼最小高度不應該是100％的包裝。 – Aaron

只能使頁腳停留在底部

回答

相關問題