如何將頁腳擴展到頁面底部？

我有這樣如何將頁腳擴展到頁面底部？

<section id="container"> 
    <header></header> 
    <section id="main"></section> 
    <footer></footer> 
</section>

佈局在我的頁面分配在這樣的時刻：

------------------- 
|     | 100px height 
| HEADER   | 
|-----------------| 
|     | 
| MAIN   | 500px height 
|     | 
|-----------------| 
|     | 
| FOOTER   | 
|-----------------| 
|     | 
|     | 
-------------------

我想頁腳以下主要內容區域的底部延伸這個頁面怎麼能實現？

------------------- 
|     | 100px height 
| HEADER   | 
|-----------------| 
|     | 
| MAIN   | 500px height 
|     | 
|-----------------| 
|     | 
| FOOTER   | 
|     | 
|     | 
| FOOTER   | 
-------------------

注：我注意到所有的答案，當拖着頁腳只是向下移動，迄今將針頁腳TJE頁面的底部，但是/主容器膨脹，我想頁腳擴大。

來源

2012-03-16 Jai

什麼是你的頁腳CSS？ – j08691 2012-03-16 17:20:18

目前它的正好寬度：100％;高度：300像素;顯示：塊;背景：＃000; – Jai 2012-03-16 17:21:54

我thinkl這個回答你的問題： http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom – Liam 2012-03-16 17:22:11

103

我正在尋找解決這一確切的問題，我碰到達到效果的一個非常簡單的方法來我正想爲：

footer { 
    box-shadow: 0 50vh 0 50vh #000; 
}

這將創建一個陰影，將脫落的畫面，如果不需要，但否則會給頁腳下方的空間提供100vh（完整的視窗高度值）覆蓋範圍，因此身體背景不會顯示在其下方。

來源

2013-09-21 16:59:37 c4collins

我在身體上有一個很大的背景圖像和一個部分透明的頁腳，所以沒有其他答案可以工作。這工作完美！ – Peter 2014-04-15 20:42:56

與@peter相同 - 在較短的頁面或較高的分辨率下在身體上有一個背景圖像並且有一個斷腳。這是修復。 – lewsid 2014-09-06 11:31:19

我也不得不添加'body {height：100％; ''這個工作，但很好的解決方案。 – Novocaine 2015-11-05 10:05:09

如果可能的話，我會創建頁腳延伸到底部的錯覺。

說的頁腳背景顏色是＃000000;

定身的背景顏色爲＃000000

，並確保

覆蓋了100％的寬度。

顏色＃00000是例如僅供您可能需要的圖像切片或漸變等使用LAT顏色...

來源

2012-03-16 17:22:32

這，**是**我試圖實現的效果，但它並沒有真正擴展頁腳，這是我想如何實現它。 +1 – Jai 2012-03-17 14:34:09

如果您希望頁腳具有動態高度，則可以這樣做。如果它是一個固定的高度，我會使用上面的答案之一或使用JavaScript來嗅出準備好的事件和調整事件來計算身高！希望這可以幫助！ – 2012-03-19 16:45:04

這應該做的伎倆http://jsfiddle.net/fXf4K/

來源

2012-03-16 17:28:55 Ryan

這個**，**是我想要實現的，但它不是一個真正延長頁腳，這是我怎麼想完成它的效果。 +1 – Jai 2012-03-17 14:33:46

你能舉個例子說明你究竟想做什麼？如果你只是給頁腳一個固定的高度呢？ – Ryan 2012-03-17 18:12:02

嘗試下面的小提琴這正在展示如何始終保持頁腳底部的概念。

小提琴：http://jsfiddle.net/evTb4/

演示：http://jsfiddle.net/evTb4/embedded/result/

來源

2012-03-16 17:29:59 w3uiguru

感謝，但並沒有真正回答這個問題，我不想頁腳堅持下，我想它來擴展它的高度。 – Jai 2012-03-17 14:32:17

您可以使用粘滯頁腳達到這樣的效果，像一個listed here，並將其應用到您的設計，您的頁腳推到文檔的底部，就像我在這個演示中所示：

Demo，編輯here。

來源

2012-03-16 20:39:09

雖然這被標記爲回答，但它似乎沒有完全回答OP的問題。我有同樣的挑戰，這裏是我找到的工作：

設置你的HTML &身體100％的高度
確保您的所有內容，包括您的頁腳是包裹着一個大的div（定點容器）
擺弄頁腳空間。

這裏是CSS：

html, body{ 
    height: 100% 
} 

.site-container{ 
    overflow: hidden; 
    min-height: 100%; 
    min-width: 960px; 
} 

.footer{ 
    padding-bottom: 32000px; 
    margin-bottom: -32000px; 
}

我發現這個在這裏：https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/其中包含更多的信息。

來源

2013-04-20 22:39:15

工作示例：https：// jsfiddle。net/vtva2wyu/ – 2016-02-19 10:00:48

我有同樣的問題，發現這個工作 - 只要頁腳是出於自身，即不內的div容器或任何東西。

基本上，我需要我的內容是固定的寬度和中心在白色背景上用在延伸的瀏覽器窗口中的全部寬度body標籤水平重複的背景圖像，報頭下方提供一個很好的頻帶。無論內容的高度和瀏覽器窗口的大小如何，我都希望頁腳處於深色並延伸到頁面的底部。

我的頁面（很簡單）如下：

<!DOCTYPE HTML> 
<html> 
<head>usual stuff</head> 
<body> 
<div id="container"> 
<header>fixed height and containing various stuff</header> 
<div id="sidebar">floated left and containing nav</div> 
<div id="content">floated left and containing various stuff</div> 
<div class="clearfloat"></div> 
<!-- end container --></div> 
<footer>various stuff, address etc.</footer> 
</body> 
</html>

然後在css中包括這些規則（以及所有其他樣式）：

html, body { 
    height: 100%; 
    overflow: hidden; 
} 

    footer { 
    height: 100%; 
}

隱藏溢出去掉了煩人滾動條由100％html和body height引起，可補償容器的高度，並延伸到瀏覽器窗口之外。

來源

2013-05-09 18:56:07

類似@ c4collins，您可以使用視圖，而不是高度固定像素的，萬一有人有巨大的顯示器

footer{ 
    box-shadow: 0 100vh 0 100vh #000000; 
}

來源

2017-09-30 00:47:13 thomaschall

你應該參考你所指的答案的人的名字，因爲你的意思不是直接明白你的意思。 – Jaquez 2017-09-30 01:39:57

這不提供問題的答案。一旦你有足夠的[聲譽]（https://stackoverflow.com/help/whats-reputation），你將可以[對任何帖子發表評論]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提問者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [來自評論]（/ review/low-quality-posts/17488858） – Styx 2017-09-30 04:05:15

如何將頁腳擴展到頁面底部？

回答

相關問題