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 サイトの他の関連記事を参照してください。

前の記事：長い単語が Div レイアウトを壊さないようにするにはどうすればよいですか? 次の記事：Div に長い単語が含まれないようにするにはどうすればよいですか?

このウェブサイトの声明

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

著者別の最新記事

• アブダビソブリンファンドは4億米ドルを超えるブラックロックビットコインETF解釈を投資します
  2025-03-04 10:12:01
• ZZZ 1.6バナーは、Anbyの新しいバージョンを備えており、最後に、Pulchraという名前の新鮮なAランクエージェントを備えています
  2025-03-04 10:09:11
• NI博士のネットワーク情報は2025年2月17日に更新されます。ゾンワン後の先駆者は驚きに満ちていると思います！
  2025-03-04 10:09:01
• ビットコインエクスチェンジリバーCEO：Microsoftの量子コンピューティングチップは、ビットコインの脅威を加速する可能性があります
  2025-03-04 10:06:01
• 戦略は、ビットコインを購入するためにさらに20億ドルを費やしました！保持されているコインの総数は499,000を超えました
  2025-03-04 10:03:02
• 1つの記事は、マイクロ戦略/ビットコインプレミアムレートの市場価値が3か月で1.6に急落したことを理解しています
  2025-03-04 10:00:03
• 出典：SECはステーキングに非常に興味があります！または、イーサリアムの復活を促進しますか？
  2025-03-04 09:57:01
• PIコインのためにBinanceに行きたいですか？ BinanceのPi Coin投票活動がオンになっています（投票住所があります）
  2025-03-04 09:54:01
• バーンスタイン：ビットコインは今年200,000ドルで利用できると予想されます！暗号通貨ブルマーケットは2026年に登場します
  2025-03-04 09:51:02
• アテネは今日Bingxにリストされています：アテナの価格の次のステップは何ですか？
  2025-03-04 09:48:01

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2880

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

3065

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

2511

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

2454

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

2483

関連トピック

詳細>

• MySQLデータベースの移行方法
• Ouyi取引プラットフォームアプリ
• qsort関数の使い方
• Printf の使い方百科事典
• どのoaシステムが良いのでしょうか？
• iPhone 16の発売予定時期
• トークンってどういう意味ですか？
• データの保存方法にはどのようなものがありますか?