css - 具有 100% 高度覆盖 div 的全屏背景图像

Question

看看这个 picture看看我想要完成什么。基本上我想使用全屏背景图像，然后在左侧的 Logo 和导航栏之后覆盖一个 div(在链接的图片中，这是中间的灰色区域，周围有红线)总是有一个 100 % 高度与滚动无关。

我认为我可以解决这个问题的唯一方法是为垂直重复的灰色区域使用背景图像，然后为全屏背景图像制作一个 div 并更改周围的 z-indexes 以获得所需的分层。

我为覆盖 div 使用的 css 是:

#overlay
{
    position: absolute;
    left: 360px;
    top: 0;
    bottom: 0;
    width: 600px;
    height: 100%;
}

但是当您必须滚动以获得更大的内容时，div 总是在“折叠”处结束，然后背景图像将接管其余内容。

有什么技巧可以让我在纯 CSS 中做到这一点吗？此外，由于跨浏览器问题，我不想使用 CSS3 多背景。

Answer 1

尝试删除 height: 100% 并将位置更改为 relative。

您可能需要添加一些填充和边距以使其完全符合您的要求，但这应该可以解决它。