How to Make a CSS Div Stretch to 100% of the Page Height Without JavaScript?

How to Stretch a CSS Div to 100% of the Page Height

In the world of web design, it's often desirable to have elements that stretch to the full height of the page, including hidden areas accessible through scrolling. This is especially useful for creating sidebars, headers, and footers.

To achieve this effect without resorting to JavaScript, let's explore a CSS solution.

CSS Solution

The key to stretching a div to 100% of the page height lies in understanding the relationship between the HTML and body elements. Here's the code:

<code class="css">html {
    min-height: 100%; /* Ensure HTML is at least as tall as the viewport */
    position: relative; /* Make HTML box layout reference for divs */
}

body {
    height: 100%; /* Force BODY to match HTML height */
}

#my-div {
    position: absolute; /* Take div out of document flow */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; /* Hide overflow for aesthetic purposes */
    z-index: -1; /* Remove this line for non-background uses */
}</code>

Explanation

• html: We set the minimum height of the HTML element to ensure it's at least as tall as the viewport. The position: relative; makes the HTML box the reference for divs.
• body: We force the body element to match the height of the HTML element. This ensures the entire page stretches to the full height.
• #my-div: Using position: absolute;, we remove the div from the document flow and position it absolutely using top, bottom, left, and right properties. The overflow: hidden; prevents the overflow from spilling out of the div.

By following this approach, you can easily create a CSS div that stretches to the full height of the page, giving you greater flexibility in your web design.

The above is the detailed content of How to Make a CSS Div Stretch to 100% of the Page Height Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!