2

问题

我希望我的内容区域的 CSS 背景纹理在可变高度标题之后立即开始。纹理的自然高度为 900px，并渐变为纯色，因此如果它适合 content-start 和 body-end 之间的可用空间，则应该显示整个纹理。纹理不应人为地扩大内容区域或造成不必要的滚动，但当内容长于页面大小时仍应出现滚动。

JSFiddle

根据要求，这是我的问题的 JSFiddle。由于问题中实际上只有一个 DOM 元素，我认为小提琴并没有澄清太多。http://jsfiddle.net/AbEUe/5/

什么不起作用

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

以上确保显示整个图像，但负边距不会像我希望的那样保持不必要的滚动条。

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

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

我想避免使用需要处理屏幕大小调整的 JavaScript。

4

2 回答 2

1

我想我做到了：http: //jsfiddle.net/AbEUe/7/

我创建了 2 个容器 div，它们的高度均为 100%。

  • 第一个包含标题和背景，overflow:hidden因此背景停止在底部。

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

您可以看到您必须渲染标题两次，但这并不重要，因为第一次不可见。

编辑：

通过将背景设置为内容 div 解决了最后一个问题（见评论）。见http://jsfiddle.net/AbEUe/8/

于 2012-06-13T12:30:58.383 回答
1

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

#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;}
于 2012-06-13T10:29:47.737 回答