垂直伸展绝对定位的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到页面大小

回答

相关问题