一个容器中的div，延伸到无穷大的背景

我有一个设计理念，我不完全确定最好的方式去关闭HTML和CSS。基本上我想做什么，我（粗制滥造）绘制此图中：一个容器中的div，延伸到无穷大的背景

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＃内容将具有伸展到无限的背景。这有可能在不改变标签背景的情况下拉开？我想在我的网站中的多个页面上使用它，所有这些页面都有不同的高度和距离，因此我希望能够做到这一点，而无需为这些不同的标签切换背景图片页面。而div＃的内容将有可变的内容长度，所以使用正文背景图片不是一个非常优雅的解决方案。如果不采取某种绝对定位的方式，那也不错。

对不起，我希望我想要做的是明确的。有什么建议么？

来源

2011-11-19 goddamnyouryan

删除我的答案，因为它现在没有帮助你，我现在更好地理解你的问题。对不起，我没有一个完整的答案给你。 –

没关系，我很抱歉没有更好地解释我自己！我不完全确定这甚至是可能的，我只是希望高于我的薪酬级别的人可能有一些洞察力。 – goddamnyouryan

负边距可能会做你想要的东西....但我不确定 –

我鞭打this了。

只需在内容区域下方添加一个div，使其与标题中的元素相匹配。它无限地在两个方向上发展。我希望这是你想要达到的目标。

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

来源

2011-11-19 07:46:49 Purag

我喜欢你的头在哪里。关了。我只想让它在一个方向上延伸到无穷大，并且我希望在它上面和下面都有可变长度的内容。 – goddamnyouryan

这是怎么回事？我使用javascript：http://jsfiddle.net/purmou/HAddq/3/ – Purag

是的，就是这样。我认为这是不可能的，没有JavaScript。真棒。 – goddamnyouryan

“无穷大”，你的意思是说，div＃内容似乎永远在页面的左边和更远处？它不可能无穷无尽，但你当然可以给出这种幻想。

叹息 ....我有点困惑。也许是因为它的午夜，我想不清楚，但我掀起这件事：

Live preview（欢迎到餐桌这一小提琴和玩它来得到它恰到好处）

这是接近你在找什么？我不知道是否最健壮的方式来做这个权利可能涉及Javascript（特别是jQuery）。这对于了解该“内容”div的高度确实有帮助，如果窗口更改了它的尺寸，jQuery可以帮助我们确定它的大小/位置。

来源

2011-11-19 07:23:29 Matt

对不起，我的意思是它似乎永远持续下去（它只是延伸到页面的左边缘）。您的解决方案正是我正在寻找的，有一个问题，即固定位置。如果添加更多内容（滚动），则div保留在相同的位置。我希望它能够与其他内容一起滚动。看到？ http://jsfiddle.net/mcyG3/2/我认为jQuery可能是要走的路，用它来从容器外追加一个空的div。 – goddamnyouryan

只需在div＃容器中删除'position：relative'并在div＃内容中添加'position：fixed'，即可获得您想要的内容。参见[http://jsfiddle.net/mcyG3/3/](http://jsfiddle.net/mcyG3/3/） – Genzer

d'oh！万分感谢。对我来说也迟到了......我想知道是否可以做到这一点，因此定位是相对于上面的内容。内容是可变的，所以它会很好，如果它可以相对于它上面的内容定位（不想覆盖任何东西） – goddamnyouryan

一个容器中的div，延伸到无穷大的背景

回答

相关问题