Home  >  Article  >  Web Front-end  >  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?

DDD
DDDOriginal
2024-10-31 10:20:01601browse

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn