Make an absolutely positioned div stretch to 100% of the document height with no JavaScript

https://stackoverflow.com/questions/23289822

09-07-2023
|

Domanda

Is there any neat CSS-only way to make an absolutely positioned div element stretch to the bottom of the document (not just the browser's window)?

Essentially, the div element is the background of a modal popup, overlaying the rest of the application. It should cover the entire page - from top to bottom. However, when the content is larger than the browser window, height still only sizes the element to the window height (and the content flows out of the div).

#background{
    background-color: green;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#content{
    color: white;
    height: 200%; /* simulate a lot of content - just put a large value in here */
}

Used like this:

<body>
    <div id="background">
        <p id="content">a</p>
    </div>
</body>

For example, look at http://jsfiddle.net/TuNSy/ : The green background stretches to the visible portion of the parent element, but when you scroll down, you'll see that it doesn't actually stretch all the way to the bottom.

There are a couple of other questions, but they don't apply to my problem:

CSS Div stretch 100% page height : Just stretches the element to the window height and doesn't work when the content is larger than the window.
Absolute position background 100% of page height : illustrates the problem, but has no accepted answer, the original poster ends up using JavaScript.

Soluzione

The problem is that your absolutely positioned div is larger than your body which is why you are having the problem of the white background. If you simply add overflow:auto; to your #background, it should handle the overflow properly

Example

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow