Question

我有一个设计理念，我并不确定在html和css中将其拉出来的最佳方法。基本上我想做我在这张图片中粗略地绘制的内容：

Crappy design idea

我基本上希望div从页面顶部向下延伸一段距离，从无穷远处延伸到容器的边界内以显示一些内容。我的代码看起来像这样

# html
<html>
  <body>
    <div id="container">

      <div id="content">
        Some text content
      </div>

    </div>
  </body>
</html>

# css
div#container {
  width: 1140px;
  margin: 0 auto;
}

div#content {
  width: 300px;
  background: #000;
  color: #fff;
  float: left;
}

div＃content将是具有延伸到无穷大的背景的内容。这可以在不改变标签背景的情况下实现吗？我想在我的网站中的多个页面上使用它，所有页面都有不同的高度和距离顶部的距离，所以我希望能够在不必为标签切换背景图像的情况下执行此操作这些不同的页面。 div＃内容的内容长度可变，因此使用正文背景图像并不是一个非常优雅的解决方案。如果不采用某种绝对定位，这样做会很好。

抱歉漫无目的，我希望我要做的事情很明确。有什么建议吗？

Answer 1

通过“无限”，你的意思是div＃内容似乎永远在页面的左边，超出了？它不能真正用于无限，但你当然可以给出这种幻觉。

叹息 ....我有点困惑。也许是因为午夜时分，我不能直接思考，但我鞭打了这个：

Live preview （请随意分享这个小提琴并玩弄它以使其恰到好处。）

这接近你想要的吗？我想知道这样做的最强大的方法是否可能涉及Javascript（jQuery，具体而言）。知道“content”div的高度真的很有帮助，如果窗口改变了它的尺寸，jQuery可能会帮助我们调整它的大小/位置。

Answer 2

我鞭打this。

只需在内容区域下方添加一个div，该div与标题中的元素相匹配。它在两个方向上都是无限的。我希望这是你想要实现的目标。

编辑：根据您在评论中的请求，我将this放在一起。它使用jQuery来设置底层div的宽度及其上边距，这可以通过获取fg div的顶部偏移来找到。

容器中的div，背景可以延伸到无穷大

2 个答案: