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

How to Keep a

Full Screen Regardless of Content Size

Problem:

Is it feasible to make a

element occupy the entire screen regardless of the content it contains?

Solution:

The following CSS approach consistently achieves the desired effect:

  <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>This solution is both straightforward and cross-browser compatible. It involves setting four CSS attributes:</p>
<ul>
<li>height: 100% for the  and  elements ensures they fill the entire screen vertically.</li>
<li>margin: 0 for the  and  elements removes any default margins or padding that could affect the full-screen effect.</li>
<li>min-height: 100% for the #wrapper element ensures that it is always at least as tall as the viewport, even if its content is shorter. This prevents the content from being cropped or scrollable.</li>
</ul>
</div>

The above is the detailed content of How to Make a Div Element Always Occupy the Full Screen?. For more information, please follow other related articles on the PHP Chinese website!