CSS粘性頁腳 - 內容樣式的問題

我試圖用CSS實現粘性頁腳。我意識到這是一個常見問題，所以我嘗試了通過Google找到的各種解決方案。CSS粘性頁腳 - 內容樣式的問題

但是，我發現的解決方案中沒有一個能完成我正在嘗試完成的任務。我不僅希望頁腳處於最底部，而且還可以在頁眉和頁腳之間放置一個div，即使沒有足夠的內容，也可以佔用所有可用空間（想象一下，如果在#content之間放置邊框，它應該從頭部一直擴展到頁腳，無論內容有多少）。

這是解決方案失敗的地方。無論是「推」元素阻礙。或者，沒有辦法將div設置爲100％而不破壞頁腳或將頁面寬度增加到100％以上。

下面是基本標記：

<!DOCTYPE html> 
<html> 
    <body> 
     <header> 
      Header! 
     </header> 
     <div id="content"> 
      Content! 
     </div> 
     <footer> 
      Footer! 
     </footer> 
    </body> 
</html>

再次，我已經跑出去的想法，使CSS做我想做的事情。我可能不會使用Javascript。幫幫我？

編輯：我寧願頭有一個動態的高度。在任何時候都不應該看到頁腳。它應該像this一樣工作。編輯2：它應該看起來有點像this，除了黑色區域應該一直延伸到頁腳。

來源

2013-03-02 ryyst

試試這個頁腳

position：fixed;

bottom：0;

頁腳將始終可見，無論滾動位於何處。

來源

2013-03-02 16:10:12 Codeformer

對不起，如果我不清楚，但頁腳不應該總是可見。 – ryyst 2013-03-02 16:12:50

，最好的辦法是有一個絕對div爲您的內容上同時設置了和bottom: FOOTER_HEIGHT;

也推DIV inner具有100％的高度，其母公司應該有一個height不min-height。爲防止將min-height更改爲height，您應該添加overflow: visible;。

來源

2013-03-02 16:15:37 Sheric

動態標題高度有可能嗎？ – ryyst 2013-03-02 16:25:26

你也可以把這個標題放在這個div中，並且在頂部設置0。 – Sheric 2013-03-02 16:47:56

我只是擺弄了一下，但我沒有得到它的工作。 – ryyst 2013-03-02 16:59:52

爲了使「內容」 100％的高度，必須設置html和body既100%高度和內容100%的min-height爲好。

您還需要填充內容的頂部/底部，以便頁眉和頁腳（絕對定位以免混亂100％高度以創建不必要的滾動條）。這個填充要求你知道頁眉/頁腳的高度，但是因爲它們應該是靜態的，所以你很可能會這樣做。

最後，需要border-box作爲box-sizing的內容，以防止從到的填充高度。

無論內容的大小如何，這都可以工作。

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
} 
#content { 
    min-height: 100%; 
    background-color: blue; 
    padding-top: 50px; 
    padding-bottom: 50px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    color: white; 
} 
header { 
    height: 50px; 
    background-color: yellow; 
    position: absolute; 
    width: 100%; 
} 
footer { 
    position: fixed; 
    background-color: red; 
    height: 50px; 
    bottom: 0; 
    width: 100%; 
}

在行動：

http://jsfiddle.net/s8gZB/2/

http://jsfiddle.net/s8gZB/1/

來源

2013-03-02 16:20:49

我編輯了我的問題，頁腳不應始終顯示，它應該像[this]（http://www.cssstickyfooter.com）一樣工作。 – ryyst 2013-03-02 16:25:10

@ryyst更多類似這樣？ http://jsfiddle.net/s8gZB/3/（取消註釋JS並再次運行以增加'＃內容的大小） – 2013-03-02 16:28:17

像[this]（http://jsfiddle.net/awTZS/），除了黑色部分應該 – ryyst 2013-03-02 16:38:49

CSS粘性頁腳 - 內容樣式的問題

回答

相關問題