Div 要素を常に画面全体の高さを満たすようにするにはどうすればよいですか?

全画面の維持

コンテンツに関係なく

の作成コンテンツに関係なく、画面の垂直方向の高さ全体を占める要素は、Web 開発の一般的な課題です。これは実現可能ですか?

解決策

次の CSS アプローチは一貫してこの効果を実現します:

html, body {
  height: 100%;
  margin: 0;
}

#wrapper {
  min-height: 100%;
}

この解決策は次のように機能します:

• html 要素と body 要素の高さ属性とマージン属性を 0 に設定すると、ブラウザの余白を削除します。
• #wrapper 要素の min-height を 100% に設定して、利用可能な垂直方向のスペースをすべて確実に占有します。

補足事項

• 古いバージョンの Internet Explorer (IE6 以下) の場合、強制的に追加の CSS ルールが必要です。 #wrapper を使用して、画面全体の高さを占めます。
• 高さの代わりに min-height を使用すると、必要に応じて追加のコンテンツを画面の高さを超えて拡張できます。

以上がDiv 要素を常に画面全体の高さを満たすようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。