Html CSS背景从变量标题下方开始

问题

我希望我的内容区域的CSS背景纹理在可变高度标题之后立即开始。纹理的自然高度为900px，渐变为平坦的颜色，因此如果它适合内容开始和正文结束之间的可用空间，则应显示整个纹理。纹理不应该人为地扩大内容区域或导致不必要的滚动，但是当内容超过页面的长度时，滚动仍然应该出现

JSFiddle

根据要求，这里是我的问题的一部分。因为问题中实际上只有一个DOM元素，所以我认为fiddle并没有澄清太多

什么不起作用

#contentAndBackground {
    padding-bottom: 900px;
    margin-bottom: -900px;
    background: url('my900pxHighImage.png') repeat-x;
}

以上确保了整个图像的显示，但负边距并没有像我所希望的那样将不必要的滚动条挡开

#contentAndBackground {
    min-height: 900px;
    background: url('my900pxHighImage.png') repeat-x;
}

同样的问题。显示整个图像，但始终显示滚动条

---

我希望避免使用需要调整屏幕大小的JavaScript。

您的问题不是很清楚，但这可以防止您的小猫被切碎

#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;} 

我想我做到了：

我已经创建了两个容器div，它们的高度都是100%

• 第一个包含标题和背景，并且具有

  溢出：隐藏

  ，因此背景在底部停止

• 第二个容器包含标题和内容，由于使用了定位，这一个容器位于第一个容器的顶部，可以延伸到100%以上（如果文本量需要）

你可以看到你必须渲染头两次，但这并不重要，因为第一次是不可见的

编辑：

---

通过将背景设置为content div解决了最后一个问题（请参见备注）。请参见

有没有机会演示？当然，我很乐意。它可能不会解释太多，因为整个问题实际上是关于一个有背景的div，而jsfiddle不做背景。我可以用什么方法来存储背景吗？或有很多选择：）你可以在这里储存背景图片：-太棒了，10分钟后发布，包括各种场景。谢谢你，杰森。设计提供的实际图像为900px高。设计师的意图是覆盖我们社区的大部分屏幕，因此应用最小高度将触发每个人的假滚动，我正试图避免。哦，等等，有一个问题：滚动视图外部的背景不可见：p但这可能是解决方案的方向。好的，我花了一点时间来理解它。这仍然可能是最好的方法，但因为标题中有活动内容，我讨厌生成两次。它可能会导致缺陷，如果说，它取决于时间，并且在两次渲染之间发生了变化，或者如果标题有内部副作用，或者其中有DOM ID，等等。我会在一点时间内重新标记您的答案，但我会保留它，并为改进的答案奖励额外的分数。与设计师讨论过，他同意进行另一种布局。我仍然会把奖金奖励给任何提出其他解决方案的人。你的问题中没有提到活动内容。但在这种情况下，我将使用javascript（您已经在使用它）来获取标题的高度，并将其应用于container1中的虚拟标题。