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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
