Home > Article > Web Front-end > How to Make a CSS Div Stretch to 100% of the Page Height Without JavaScript?
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
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!