How to Make a Full-Screen Background Gradient Fill the Entire Page?

Ensuring a Full-Screen Background Gradient

Achieving a full-screen background gradient is a common task in web development. However, when the body element does not occupy the entire page, the gradient can appear truncated. Here's a solution to effectively make the element fill the entire screen, irrespective of the content's height:

By applying the following CSS properties to the and elements:

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

This ensures that both the and elements have no margins, effectively eliminating any whitespace around them. Moreover, setting the height to 100% specifies that the height of these elements should occupy the full vertical space of the browser window.

As a result, the element will stretch to fill the entire screen, and the radial gradient background will be visible across the entire page, regardless of the amount of content present.

The above is the detailed content of How to Make a Full-Screen Background Gradient Fill the Entire Page?. For more information, please follow other related articles on the PHP Chinese website!