2011-12-27 20 views
1

これは、HTML5の<header>,<footer>という要素を使用した最初の試みです。通常XHTMLでは、コンテナ内のフッターであるdivを持つことになります。<div>とセンターは、どちらもクリアに展開されます。センターコンテンツのdivは100%の高さではありません

ここで100%の幅のテンプレートを試していますが、100%の高さで中央の領域が得られません。皆さん、これに間違ったことがありますか? http://www.designinipad.com/html5test.html

かで:

https://gist.github.com/1524774

おかげ

コードがです!

答えて

1

過去にdiv要素を使用したことは、header要素とfooter要素を使用して同じように機能します。 divのように、これらは単にコンテナ要素であり、同じように動作します。

0

あなたは、コンテナ、身体とhtmlの高さを100%に設定した場合、それが動作するはずです:

body, html { 
    height: 100%; 
} 

この質問は助けになるはずです:Make div 100% height of browser window

私の唯一の懸念は、高さを割り当てることです< html>と< body>は標準に準拠していないようです。

あなたはそれを回避できますか?おそらく、IDのコンテナを使用して< div>に最小の高さを割り当て、700pxの周りに押し込んでください。

#container { 
    min-height: 700px; 
} 
+0

これは準拠していない点で優れています。最小身長はipadの場合768pxを下回らないように助けてくれますが、画面上にあればどうなりますか?例えば、私が知っている古い学校のような繰り返しのエッジを持つとしたら、フッターがある場所の底までどのようにしたらいいですか?私は通常、すべてのものにdivを使用しています。絶対位置を決して使用しないので、これが原因かどうかはわかりません。ありがとう。 – pcproff

+0

@Miguel - これらの要素に高さを適用できるかどうかを示す標準はありません。それはコンプライアンスの問題ではありませんが、そうすることができます。 – Rob

+0

私の要点コードを更新しました。私はスクロールせずにフルスクリーンのタイプのルックを目指していました。そこで私はオーバーフローを追加しました。 htmlに変換し、コンテナーの最小高さを複数の解像度を考慮して1200ピクセルにしました。これはバリデーションに対してフラグを投げません。 「Grows with content」divに戻るには、もっと多くのコンテンツを用意して、これらのタグを両方とも削除するようにしてください。皆さんありがとう! – pcproff

関連する問題