頁腳背景應該延伸到瀏覽器的底部

我有一個問題，修復頁腳底部的瀏覽器..問題是當決議更改或Windows調整頁腳內容重疊網站的內容時，這裏是當前css for footer div頁腳背景應該延伸到瀏覽器的底部

div.footer { 
     position:absolute; 
     bottom:0px; 
    }

有沒有人知道我該如何解決這個問題？謝謝

UPDATE：

這是我需要的究竟，但由於某種原因，它不適合我的網頁的工作，它的工作時，我切粘貼代碼的空白頁，但因爲我的頁面充滿了內容和所有內容，包含哪些重要元素？ Here是網址。

上述技巧只適用於我的網站已經填充內容，如果我有一些可以說幾行上述技巧不起作用。

UPDATE II

我的網站具有動態內容，所以我認爲不能用這種CSS粘滯頁腳因爲有時網站將只是還幾行有時可以與內容包裝。這就是爲什麼頁腳不堅持在網頁的底部..如果網站上有很多內容的話，粘貼頁腳並不是問題。

來源

2009-12-14 ant

所以你使用/測試與IE瀏覽器？文檔類型是嚴格的嗎？ – BalusC 2009-12-14 13:08:31

是IE7包括以及ff和IE8，問題只發生在IE7 – ant 2009-12-14 13:09:18

哪種doctype您使用？ – 2009-12-31 11:02:04

什麼你在這裏是一個常見的問題，沒有共同的答案，但我會嘗試，如果我是你，因爲所有這些以上的建議顯然不工作，我會嘗試將我的頁面容器背景設置爲任何顏色讓我們說白色（#FFFFFF），我會設置背景顏色的任何ot她那麼白色讓說灰色（#CCCCCC）。並最終確定頁腳的位置，當然它必須放在所有東西之後，如果你總想把它放在底部。這樣，如果您按照分步說明進行操作，您就可以100％確定所需。

來源

2010-01-05 10:14:28 Adnan

什麼是「頁面容器背景」，它是如何不同從「身體的背景顏色」（''）？ – joshuahedlund 2012-03-13 15:25:41

唯一的問題是當我有一個在這個機構內的表，有兩個很多列顯示。（使IE水平滾動）。在這種情況下，當您向右滾動時，您會看到背景更改爲#CCCCCC – Jeevan 2013-04-05 20:32:15

（繼續上述註釋），我通過做一個小jquery來解決問題 - $（document）.ready（function（）{ （$（'body table'）。width（）> 1000） $（'body'）。width（$（'body table'）。width（）+ 300）; }）; ---------基本上將300增加到桌子的寬度，並將其作爲身體的寬度 – Jeevan 2013-04-05 21:30:58

是什麼，你正在尋找一個粘頁腳，你可以找到很多資源，像這樣的：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

來源

2009-12-14 13:07:47

真的沒有工作m8，還有其他的東西嗎？ – ant 2009-12-14 13:21:29

取決於你想要做什麼。我希望它在你的屏幕的底部總是可見的，你應該使用

div.footer{ 
    position: fixed; 
    bottom: 0; 
}

一定要得到你的身體（或容器底部的一些填充，使人們實際上可以滾動至底部的文字）。這裏的主要問題是，調整一切時會重疊。

如果你只是想有一個頁腳的背景圖像/顏色一直延伸到最後（對於不是頁面高度的頁面），你可以嘗試使用虛擬列原理，甚至嘗試爲您的身體提供頁腳的背景顏色並修正頁眉/內容背景。

今天我碰到這個頁面跌跌撞撞： http://www.xs4all.nl/~peterned/examples/csslayout1.html

可能是有益的

來源

2009-12-14 13:29:05 joggink

謝謝你的鏈接 – ant 2010-01-26 20:46:17

基本上你需要給頁腳固定height和推頁腳具有相同高度的另一個div來的底部。還有，你需要考慮到然而更多的瀏覽器具體的東西：

除了具有100％沒有（默認）利潤率的高度，以避免頁腳的html和body必須在被進一步推到低於量的保證金。
整個頁面中的p和div元素必須具有否margin-top以避免頁腳被進一步推到每個Firefox下的頂部邊距以下。
的「容器」 div必須使用min-的100%代替heightheight避免頁腳以重疊內容的剩餘。 IE6不知道min-height只能在height下正常工作，所以你需要爲此添加一個* html黑客。

所有的一切，這裏是一個SSCCE，只是copy'n'paste'n'run它：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 
     <title>SO question 1900813</title> 
     <style> 
      html, body { 
       margin: 0; 
       height: 100%; 
      } 
      p, div { 
       margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */ 
      } 
      #container { 
       position: relative; 
       min-height: 100%; 
      } 
      * html #container { 
       height: 100%; /* This is actually "min-height" for IE6 and older. */ 
      } 
      #pushfooter { 
       height: 50px; /* Must be the same as footer height. */ 
      } 
      #footer { 
       position: absolute; 
       bottom: 0; 
       height: 50px; 
      }  
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <p>Some content</p> 
      <div id="pushfooter"></div> 
      <div id="footer">Footer</div> 
     </div> 
    </body> 
</html>

編輯：經過測試，我意識到，這確實不不工作在IE8（我仍然認爲它是一個測試版，所以我沒有真正使用/測試它，對此感到抱歉），，除非你讓它呈現在IE7兼容性模式（在這裏插入傷心笑臉），通過添加以下元標記<head>（我已經在上面添加到SSCCE了）：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

或讓它在怪異模式通過使用「錯誤的」文檔類型呈現（或者刪除<!doctype>或挑）與痛苦紅色Q盒在IE here相關聯的文檔類型中的一個。但我不會那樣做，那也有更多的負面影響。

而且，奇怪的是，http://www.cssstickyfooter.com網站爲別人在這裏這裏提到它使用了完全不同的方法也並沒有在 IE8在這裏工作（嘗試調整瀏覽器窗口中y軸，頁腳不會一起移動它與其他瀏覽器（包括IE6/7）相反）。該瀏覽器讓我驚訝。真。

來源

2009-12-14 15:00:00 BalusC

這個工程，但我的頁腳仍然不在底部，它是在中間的某個地方..不是真的堅持底部 – ant 2009-12-14 15:39:19

然後，問題是在別的地方，而不是你提供的信息。你是否舉例copy'n'paste'n'run上面的代碼**不變**？如果仍然失敗，請告訴瀏覽器的詳細信息。 – BalusC 2009-12-14 16:05:02

我更新了我的問題 – ant 2009-12-15 10:17:20

結帳CSS Sticky Footer爲優秀的跨瀏覽器兼容的方法。

該網站實質上所做的是讓頁腳粘在瀏覽器邊緣，並給它一個與頁腳高度相同的負邊距。這樣，頁腳肯定會粘在底部。

來源

2009-12-14 18:27:00

看起來很有希望，直到我在最新版本的IE8中測試它。不起作用。出乎我的意料。另請參閱我的答案在這裏：http://stackoverflow.com/questions/1900813/footer-background-should-extend-to-bottom-of-browser/1901381#1901381 – BalusC 2009-12-14 19:00:51

您可以將推動div添加到頁腳前的最後一個元素，以便始終確保頁腳不會與內容重疊。

考慮這個例子：

<html> 
    <body> 
    <div class="header" /> 
    <div class="content" /> 
    <div class="footer_push" /> 
    <div class="footer" /> 
    </body> 
</html>

如果<div class="footer" />總是75px高，使用下面的CSS：

html, body { height: 100%; } /* Take all available vertical space */ 

/* Push the bottom of the page 75px. 
    This will not make scrollbars appear 
    if the content fits already. */ 
.footer_push { height: 75px; } 

/* Position the footer */ 
.footer { position: absolute; bottom: 0; height: 75px; }

來源

2009-12-14 18:36:12

嘗試頁腳位置設置爲相對和帶負上邊距來玩弄得到它你想要它。

來源

2009-12-14 21:36:17 Davey

試試這個：

#wpr{ 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.dsp-tr{ 
    display: table-row; 
} 
.dsp-tc{ 
    display: table-cell; 
} 
#ftr-cnr{ 
    text-align:  center; 
    vertical-align: middle; 
} 
#ftr{ 
    background-color: red; 
    padding:   10px 0px; 
    font-size:  24px; 
} 


<div id="wpr"> 
    <div class="dsp-tr"> 
    <div class="dsp-tc"> 
     body 
    </div> 
    </div> 
    <div class="dsp-tr"> 
    <div class="dsp-tc" id="ftr-cnr"> 
     <div id="ftr"> 
     footer 
     </div> 
    </div> 
    </div> 
</div>

顯示：表不使它成爲一個表，<div>仍然是一個<div>，它只是告訴以顯示爲表中的瀏覽器。我測試了它在鉻和火狐讓我知道它是否適合你。

來源

2009-12-27 09:08:03 BigName

我們有這個問題幾次。我們無法找到任何跨瀏覽器的CSS解決方案。我們終於訴諸了JQuery。我們寫我們自己的（我不能發佈），但是這一個http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm看起來很有希望：

$(function(){ 
    positionFooter(); 
    function positionFooter(){ 
     if($(document.body).height() < $(window).height()){ 
      $("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"}) 
     } 
    } 

    $(window) 
     .scroll(positionFooter) 
     .resize(positionFooter) 
});

來源

2009-12-31 11:13:11

你有沒有在你的HTML的頂部DOCTYPE聲明？

如果是這樣，我很有可能爲您解決問題。

我試圖做一個高度：100％表或DIV（假設這是一個基本的基石，以擴大頁腳功能）

無論我做什麼，100％的高度沒有工作！元素只是不舒展......

我把範圍縮小到一個非常基本的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test1</title> 
</head> 
<body> 
<div style="border: 2px solid red; height: 100%">Hello 
World</div> 
</body> 
</html>

但DIV並沒有延伸到了所有的方式（100％被忽略）。這對於具有普通高度=「100％」屬性的表也是如此。

作爲一個絕望的最後結果的猜測，我刪除了DOCTYPE行，導致該代碼

<html> 
<head> 
<title>Test1</title> 
</head> 
<body> 
<div style="border: 2px solid red; height: 100%">Hello 
World</div> 
</body> 
</html>

和它的工作！

我敢肯定有一個很好的解釋，但我真的不關心，因爲它解決了這個問題

更新

參見相關question（由我問）

來源

2010-01-03 18:21:21

我想出了一個相當簡單的解決方案，不使用任何CSS高度黑客或任何。

您只需在背景上設置<body>，然後將其他所有內容都放入<div>中，並將其通常放置在body標籤中。

當有很多動態內容時，當動態內容較短而不需要擴展時，頁腳會將其顏色「擴展」到頁面的底部。「虛擬身體」div仍然可以有漸變，然後是純色，並且頁腳的背景隱藏在身體標記中，僅顯示在短頁面上。（如果你需要一個堅實的顏色來繼續你的頁腳梯度結束後，或者如果你只是需要的背景相匹配的頁腳顏色的偉大工程）

CSS

body {background-color: #000; } 
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; } 
#footer { background: #000; }

HTML

<body> 
    <div id="primary_container"> 
    <!-- most content, can be short or long --> 
    </div> 
    <div id="footer"> 
    <!-- if primary content + footer is less than browser height, body background color 
     displays below this. If it is more, you get normal scroll behavior to the end 
     of footer and body background color is never seen --> 
    </div> 
</body>

來源

2012-03-13 15:43:10 joshuahedlund

頁腳背景應該延伸到瀏覽器的底部

回答

相關問題