私が作成したCSSとHTML5ページに関するヘルプ。

Question

私はいくつかの非常に単純なテキストイメージとビデオであるページを作成しました。私はこのコンテンツをdiv（div div）に入れました。このdiv（div inver）は白い背景を持っています。このDiv（div insver）は別のdiv（div div）内にあります。 Div（外側のdiv）は背景色が青です。何らかの理由でdiv（div innver）の背景色がページの全長に渡らない。

これは私の問題を見ることができるページへのリンクです。

http://cssdeck.com/labs/bhppooft

私は望んでいますどのようなページの全体の高さだけでなく、トップすべき白い背景です。

Answer 1

Check this one

私はそれが問題を引き起こしていた、DIVのあなたの絶対位置を削除しました。説明のために は、@Paulのように下に言った：

あなたの内側のdiv要素を絶対位置と 100％の固定の高さを持っています。これにより、 ビューポートとまったく同じ高さの白いボックスになります。

あなたのコメントの後にEDIT：
あなたは白のdivは、上部と下部に固執したい、see this fiddle

body { margin: 0;} 
p:last-child { margin-bottom: 0; } 

あなたの要素のマージンとパディングに注意してください。私が作った修正は、現在のケースでは動作しますが、最後のpタグの後に他の要素を追加するとうまくいかない場合があります。また

、あなたが開いているタグを閉じていることを確認し、これらの順序を尊重し（私はJSFiddle内のすべてのタグを修正していない）

最後に、あなたはあなたのHTMLコードを明確にするためにCSSスタイルシートを使用することができます:)

Answer 2

内側のdivは絶対的に配置され、固定高さは100％です。これにより、ビューポートとまったく同じ高さの白いボックスが作成されます。

Answer 3

ただ、両方

ポジションを削除します。絶対。 身長：100％;

内側のdivから問題が解決します。

間違ったコード

---------------- XXX ------------
背景色：白。 bottom：0; font-size：20px; 高さ：100％; 左：0; margin：0 auto; ポジション：絶対; 権利：0; text-align：justify; トップ：0; 幅：80％; z-インデックス：-1;
---------------- XXXX -------------

右のコード

------ ---------- xxx ------------
background-color：white; bottom：0; font-size：20px; 左：0; margin：0 auto; 権利：0; text-align：justify; トップ：0; 幅：80％; z-インデックス：-1;
---------------- xxxx -------------