0

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:

Community
  • 1
  • 1
Aaa
  • 614
  • 5
  • 14

1 Answers1

2

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

Pete
  • 57,112
  • 28
  • 117
  • 166
  • I guess my confusion was that the "auto" value for the "overflow" property didn't look like it would accomplish what I wanted ("If overflow is clipped, a scroll-bar should be added to see the rest of the content"), so I did not consider it. I guess "should" doesn't mean that browsers actually do it, they might just not show one at all. Thank you for sharing such an easy and non-invasive solution. – Aaa Apr 25 '14 at 10:15