CSS のコツをつかんでいると思っていたところ、ようやくポジショニングを克服できました。iPadでローカルにサイトをテストするまでは、そうでした！
以下の例を使用すると、背景を黒くしたいだけです（問題ありません）。黒の背景の上に、緑の「コンテンツ背景」を黒の背景の上で左から右 (100%) に画面全体に表示します。緑の「コンテンツ背景」の上に、メインコンテナの div が必要です。理由はわかりませんが、私の例が機能していませんか? これは簡単にできるはずです??? この問題は、ブラウザーが右から左に縮小され、スクロールの水平スクロール バーが右に移動した場合に顕著になります。これが発生すると、緑色の「コンテンツ背景」が画面全体に垂直に拡大されないことがわかりますか???
どんな助けでも大歓迎です:)
フィドル: http://jsfiddle.net/Margate/Sk5X9/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Positioning</title>
<style type="text/css">
#page-background{background-color:black; }
#content-background{position:absolute; top: 100px; width: 100%; height: 616px; background-color: green;}
#main-container{position: relative; top: 0px; width: 1000px; height: 910px; margin: 0px auto; border: 1px solid red;}
</style>
</head>
<body id="page-background">
<div id="content-background"></div>
<div id="main-container">
</div>
</body>
</html>