Home >Web Front-end >CSS Tutorial >How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?
How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?
- DDDOriginal
- 2024-10-31 10:20:01698browse
Stretching a CSS Div to 100% Page Height
In need of a CSS solution to stretch a div to encompass the entire page height, including scrolled areas, this question seeks an HTML/CSS approach to achieve this effect.
The solution presented involves removing specific CSS properties:
- Z-index: For uses other than background display.
- Left/Right: For full-height columns.
- Top/Bottom: For full-width rows.
Additionally, the following CSS is provided:
<code class="css">html {
min-height: 100%;
position: relative;
}
body {
height: 100%;
}
#cloud-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: -1; /* Remove for non-background uses */
}</code>
When implemented alongside the following HTML:
<code class="html"><!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html></code>
This solution ensures that the #cloud-container div occupies the full height of the page, including scrolled areas. The explanation provided highlights the role of HTML's min-height and position properties, as well as how z-index, left/right, and top/bottom can be adjusted to achieve the desired result.
The above is the detailed content of How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?. For more information, please follow other related articles on the PHP Chinese website!