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

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

問題:

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

解決策:

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

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

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



  <div>
<p>このソリューションは簡単で、ブラウザ間の互換性もあります。これには、4 つの CSS 属性の設定が含まれます:</p>
<ul>
<li>height:  の場合は 100%。  </li>
<li>margin:  の場合は、要素が画面全体を垂直方向に埋めるようにします。 要素は、フルスクリーン効果に影響を与える可能性のあるデフォルトのマージンやパディングを削除します。</li>
<li>min-height: #wrapper 要素の 100% により、コンテンツがたとえコンテンツであっても、常に少なくともビューポートと同じ高さになります。より短いです。これにより、コンテンツが切り取られたりスクロールできなくなります。</li>
</ul>
</div>

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