How to Make the `` Element Fill the Entire Viewport for Full-Screen Backgrounds?

Extending the Element Full-Screen

Q: I've applied a radial gradient to my webpage as a background:

<code class="css">background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));</code>

However, the gradient becomes obscured when the page content doesn't occupy the full screen. How can I ensure the element always extends to fill the entire viewport?

A: To achieve this, use the following CSS rules:

<code class="css">html, body {
    margin: 0;
    height: 100%;
}</code>

This ensures there is no margin surrounding the element and that it spans the full height of the page. The result is a consistent radial gradient background that persists regardless of the content's length.

The above is the detailed content of How to Make the `` Element Fill the Entire Viewport for Full-Screen Backgrounds?. For more information, please follow other related articles on the PHP Chinese website!