Div 要素を常に全画面に表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

Div 要素を常に全画面に表示するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-09 00:20:10

オリジナル

972 人が閲覧しました

How to Make a Div Element Always Occupy the Full Screen?

を維持する方法コンテンツのサイズに関係なく全画面表示

問題:

を作成することは可能ですか?要素は、含まれるコンテンツに関係なく画面全体を占めますか?

解決策:

次の CSS アプローチにより、一貫して望ましい効果が得られます:

<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    #wrapper {
      min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
    }
  </style>
</head>

<body>
  <div>

ログイン後にコピー

このソリューションは簡単で、ブラウザ間の互換性もあります。これには、4 つの CSS 属性の設定が含まれます:

height: の場合は 100%。
margin: の場合は、要素が画面全体を垂直方向に埋めるようにします。要素は、フルスクリーン効果に影響を与える可能性のあるデフォルトのマージンやパディングを削除します。
min-height: #wrapper 要素の 100% により、コンテンツがたとえコンテンツであっても、常に少なくともビューポートと同じ高さになります。より短いです。これにより、コンテンツが切り取られたりスクロールできなくなります。

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