ホームページ >ウェブフロントエンド >CSSチュートリアル >Div 要素を常に全画面に表示するにはどうすればよいですか?

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

Mary-Kate Olsenオリジナル: 2024-12-09 00:20:101027ブラウズ

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

css html if for default this margin padding viewport

声明：

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

前の記事：HTMLとCSSを使用して画像ホバーにテキストを表示する方法次の記事：HTMLとCSSを使用して画像ホバーにテキストを表示する方法

続きを見る