How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?-CSS Tutorial-php.cn

How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?

DDD

Release： 2024-10-31 10:20:01

Original

605 people have browsed it

How to Make a CSS Div Stretch 100% of Page Height, Including Scrolled Areas?

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>

Copy after login

When implemented alongside the following HTML:

<code class="html"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>

Copy after login

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!