全屏背景图像，100％高度叠加div

Question

查看此picture，了解我要完成的工作。基本上我想使用全屏幕背景图像然后覆盖一个div（在链接的图片中，这是中间的灰色区域，周围有红线），左侧的徽标和导航后总是有一个100无论滚动如何，％高度。

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

我用于叠加div的css是：

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

但是当你必须滚动更大的内容时，div总是以“fold”结束，然后背景图像接管剩下的内容。

我是否有任何技巧可以利用纯粹的CSS来做到这一点？此外，由于跨浏览器问题，我不想使用CSS3多个背景。

Answer 1

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

您可能需要添加一些填充和边距以获得您想要的内容，但这应该只是修复它。