全屏幕背景圖像，100％高度覆蓋div

Question

看看這picture看看我想完成什麼。基本上我想使用全屏背景圖像，然後在左側的徽標和導航後覆蓋一個div（在鏈接的圖片中，這是中間的灰色區域，周圍有紅色線條），總是會有100不管滾動的高度如何。

我認爲我能解決這個問題的唯一方法是對垂直重複的灰色區域使用背景圖像，然後爲全屏幕背景圖像製作div並更改z索引以獲取所需的分層。

我使用了疊加的div的CSS是：

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

但是，當你需要滾動較大的內容，在div總是在「摺疊」結束，那麼背景圖像將接管其餘的內容。

我有什麼技巧可以利用純粹的CSS來做到這一點嗎？另外，由於跨瀏覽器的擔憂，我不想使用CSS3多種背景。

Answer 1

嘗試刪除height: 100%並將位置更改爲相對。

您可能需要添加一些填充和邊距才能得到您想要的數據，但這只是爲了解決它。