Question

我正在尝试将元素的内容用作页面背景。我可以在浏览器窗口的长度上正常工作，但是一旦内容滚动，div就会停止。 http://jsfiddle.net/MaxPRafferty/QXYDb/

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/

Answer 1

只需定位你的背景而不是绝对的：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;
}

这会导致背景始终保持在相对于视口的位置。

垂直拉伸绝对定位的div到页面大小

1 个答案: