100％の高さのオーバーレイを持つ全画面の背景画像div

Question

私が達成しようとしていることを確認するには、pictureをご覧ください。基本的には、フルスクリーンの背景画像を使用して、常に100を持つ左のロゴとナビゲーションの後、divのオーバーレイ（リンクされた画像では、これはその周りの赤い線で中央の灰色の領域です）スクロールに関係なく％の高さ。

私がこれを取り除くことができる唯一の方法は、垂直に繰り返される灰色の領域の背景画像を使用してから、フルスクリーンの背景画像のdivを作成し、zインデックスを変更して所望の層化。

は、私は、オーバーレイのdivのために使用したCSSは：

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

しかし、あなたは、より大きなコンテンツをスクロールする必要がある場合、divが常に「倍」で終了し、その後、背景画像はを引き継ぎます残りのコンテンツ

純粋にCSSでこれを行うために利用できるトリックはありますか？また、ブラウザ間の関係のために、CSS3の複数の背景を使用したくありません。

Answer 1

height: 100%を削除し、位置を相対に変更してみてください。

パディングと余白を追加する必要があるかもしれませんが、それはちょうどあなたがしたいが、これはちょうどそれを修正する必要があります。