How to Make a Div Element Always Occupy the Full Screen?-CSS Tutorial-php.cn

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

Mary-Kate Olsen

Release： 2024-12-09 00:20:10

Original

1014 people have browsed it

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:

<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>

Copy after login

This solution is both straightforward and cross-browser compatible. It involves setting four CSS attributes:

height: 100% for the and elements ensures they fill the entire screen vertically.
margin: 0 for the and elements removes any default margins or padding that could affect the full-screen effect.
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.

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!

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

How to Keep a Full Screen Regardless of Content Size

How to Keep a
Full Screen Regardless of Content Size