垂直伸展絕對定位的div到頁面大小

我試圖使用元素的內容作爲頁面背景。我可以在瀏覽器窗口的長度上正常工作，但一旦內容滾動，div就會停止。 http://jsfiddle.net/MaxPRafferty/QXYDb/垂直伸展絕對定位的div到頁面大小

HTML：

<html><head><title></title></head> 
    <body> 
    <div id="background"></div> 
    <div id="content" style="height:900px;">Lorem Ipsum 
     <br />...an arbitrary amount of content...</div> 
    </body> 
</html>

CSS：

#content, #background { 
    position:absolute; 
    top:0; right:0; bottom:0; left: 0; 
} 
#content { 
    z-index:2; 
} 
#background { 
    background:red; 
    z-index:1; 
}

我已經嘗試了所有的舊仿欄技巧的變化，但這些問題是使用背景掩蓋不同的高度 - 在這種情況下背景是有什麼區別。

我可以輕鬆地用javascript做到這一點，但如果我可以用純CSS做到這一點，我就會癢癢。我已經打了幾天，並沒有取得進展，所以謝謝你的想法。

編輯1：我想的背景與內容滾動，在實踐中後臺將包含重複或可能比視口大以及內容： http://jsfiddle.net/MaxPRafferty/gquHF/

來源

2013-01-24 MaxPRafferty

公正的立場，你的背景固定在絕對代替：http://jsfiddle.net/QXYDb/4/

的CSS是這樣的：

#background { 
    position:fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left: 0; 
} 
#content { 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left: 0; 
}

這將導致後臺總是停留在原地，相對於視口。

來源

2013-01-24 21:28:58 Pevara

這可以完成保持背景的任務，但不幸的是，如果背景與文本滾動相反，則會產生不同的視覺效果。在我的結尾，堅實的背景並沒有給出這麼多的背景。編輯！ – MaxPRafferty

垂直伸展絕對定位的div到頁面大小

回答

相關問題