空の場合でも DIV をページ全体の高さを満たすようにするにはどうすればよいですか?

コンテンツがなくても DIV ブロックで強制的にページを垂直方向に埋める方法

特定の状況では、必要なシナリオが発生する可能性があります。 DIV ブロックは、内容に関係なくページの下部まで拡張されます。これを実現する方法は次のとおりです:

問題:

DIV ブロックにコンテンツがない場合、通常、境界線に必要な垂直方向のスペースのみを占めるように折りたたまれます。パディング。その結果、ページの下部まで拡張されず、空きスペースが残る可能性があります。

解決策:

DIV ブロックを強制的にページを垂直方向に埋めるには、次のように対処します:

1. コンテナ要素の高さ: コンテナ要素の場合DIV ブロックを囲むボディや親 div などの高さは 100% に設定されていないため、その中の DIV ブロックはコンテナーの高さを超えて拡張できません。したがって、高さを 100% に設定します。 HTML 要素と body 要素の両方のプロパティ:

html, body {
  height: 100%;
}

2. Margins and Padding: DIV ブロックまたはそのブロックに追加のマージンやパディングが追加されていないことを確認します。

これらの手順に従うことで、DIV ブロックは完全に拡張されなくなります。コンテンツがない場合でも、ページの下部まで拡張します。ただし、ブラウザーの互換性と Quirks モードが最終結果に影響を与える可能性があることに注意してください。そのため、さらに調整するには、quirksmode.org などのリソースを参照してください。

以上が空の場合でも DIV をページ全体の高さを満たすようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。