テキストをバナーの下に置く

Question

私はウェブサイトを設計していて、そのバナーの中央にテキストを含むバナー/ヘッダーイメージを作成しました。あなたが内容を見るために下にスクロールするように、ページ全体をカバーするタイプですが、ヘッダーのサイズに応じて、メインのコンテンツは自動的に上下に移動しません。幅を100％に設定しているので、ウィンドウのサイズに合わせてリサイズ、それは、ヘッダー/バナーと同じ比率を維持するように、誰かが、この問題を助けることができる HTMLコード：？

<div id="banner"> 
    <h1 id="head">head</h1> 
    <img id="logo" src="Logo.jpg" alt="logo and banner"/> 
</div> 
<div id="everythingElse"> 
    <a href="#test">Scroll</a> 
    <p>Content</p> 
</div> 

CSSコード：

#head{ 
text-align: center; 
position: absolute; 
top: 4%; 
left: 0; 
width: 100%; 
font-size: 100px 
} 

#logo{ 
width: 104%; 
} 

#banner{ 
position: absolute; 
width: 100%; /* for IE 6 */ 
top: 0; 
left: 0; 
right: 0; 
min-width: 1200px; 
} 

#everythingElse{ 
position: fixed; 
width: 100%; 
top: 75%; 
} 

Answer 1

絶対配置は使用しないでください。 browser supportが受け入れ可能な場合は100vhの高さを使用し、そうでない場合は100%を使用し、bodyとhtmlの要素がそのルールに含まれていることを確認してください。