How to adjust 100% height to include height of added element

I have a div that is added dynamically using JS that includes an overlay and a contained element that should scroll with the page as necessary (I don’t want any scrolling to happen within that div, which resizes to fit the content). The overlay is set to width=100% and height=100% to cover the entire page. However, when the contained div ends up being taller than the viewport, this causes the overlay to stop short after the height of the viewport.

That explanation kind of sucks so probably easier to see what I mean, so here’s a simplified fiddle: http://jsfiddle.net/72SU5/

Here’s the CSS I’m using:

#overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    z-index: 20;
}

#overlay > div {
    width: 100px;
    border: 1px solid #ccc;
    padding: 20px;
    padding-bottom: 40px;
    background: #eee;
    margin: 50px auto;
}

My question is how I might have the overlay extend to 100% of the new height once the hidden content is shown. I’m fine using JS/jQuery to accomplish this.

Or, if there’s a better pure-CSS approach that requires refactoring, I’m open to that as well. The only requirement is that the overlaying content scrolls with the page if the content causes it to extend beyond the viewport.

Answer

Add the following property to your #overlay CSS class:

overflow:auto;

Fiddle

Leave a Reply

Your email address will not be published. Required fields are marked *