覆蓋瀏覽器窗口的背景圖像減去頁眉和頁腳下的頁眉

標題可能有點混亂，我會盡我所能解釋我需要達到的目標。基本上我有以下元素到特定網頁：覆蓋瀏覽器窗口的背景圖像減去頁眉和頁腳下的頁眉

頭 - 以上內容始終可見
內容 - 背景圖像覆蓋整個內容區域 - 這是關鍵部分
撒哈拉頁腳 - 關於內容始終可見的信息
頁腳 - 標準公司頁腳，如果窗口高度爲特定尺寸則可見，否則需要向下滾動以查看它

如上所述，頁面的內容部分可能是最棘手的部分。我需要一個大的圖像來覆蓋整個區域的背景。 css-tricks有一個excellent guide in the ways to do full page background images。所以我希望這可以輕鬆實現。問題是如果窗口是< 720px，頁腳下面的頁腳（需要滾動到該頁面），如何使子頁腳停留在底部。一個> 720px的窗口應該顯示沒有滾動條的子頁腳和頁腳。

我甚至不會擔心在此階段的最小高度的內容必須是（可能會迫使上的內容<div>滾動或使兩個子頁腳和倍以下頁腳GO）。

這裏有我想要實現圖像原型：

首先 - 一個窗口< 720像素高的地方頁腳需要滾動以： <720px tall window where the footer needs to be scrolled to

二 - 一個窗口< 720像素高大已滾動往下看頁腳： enter image description here

最後 - 有沒有滾動條，因爲一切都是可見的高大窗口> 720像素： enter image description here

我使用的是jQuery，並不在乎IE6。我可以在CSS中實現嗎？我必須使用jQuery來動態調整事物嗎？整頁背景很容易用css3完成，我很高興使用css3或html5來做我所需要的。

來源

2011-01-25 at.

爲什麼會不會對你的工作內容一個最小高度？ – nemophrost 2011-01-25 15:44:41

你絕對不能使用CSS position: fixed，因爲它總是相對於視口而不是父元素。

您需要做的是將「subfooter」作爲「content」的固定定位子元素。爲了做到這一點，你將不得不使用JavaScript。

像這樣的東西應該做你需要的東西。嘗試改變在CSS的#content高度可變的，所以你可以看到它如何與各種內容的高度表現：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<style> 
    #header { 
     height: 50px; 
     background-color: #ccc; 
     width: 100%; 
     margin-bottom: 10px; 
    } 

    #content { 
     position: relative; 
     height: 1500px; 
     width: 100%; 
     background-color: #ccc; 
    } 

    #subfooter { 
     height: 50px; 
     width: 100%; 
     background-color: #666; 
     position: fixed; 
    } 

    #footer { 
     height: 50px; 
     width: 100%; 
     margin-top: 10px; 
     background-color: #ccc; 
    } 
</style> 
<script> 
    $(document).ready(function(){ 

     $(document).scroll(function() { 
      position_subfooter(); 
     }); 

     var position_subfooter = function() { 
      $("#subfooter").css("bottom", "20px"); 
      if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) { 
       $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20)); 
      } 
     } 
     position_subfooter(); 
    }); 
</script> 
</head> 
<body> 
    <div id="header"> 
     <h1>HEADER</h1> 
    </div> 
    <div id="content"> 

    </div> 
    <div id="subfooter"> 
     <h2>SUB FOOTER</h1> 
    </div> 
    <div id="footer"> 
     <h1>FOOTER</h1> 
    </div> 
</body> 
</html>

來源

2011-01-25 18:46:11

覆蓋瀏覽器窗口的背景圖像減去頁眉和頁腳下的頁眉

回答

相關問題