如何调整 100% 高度以包含添加元素的高度

Question

我有一个使用 JS 动态添加的 div，其中包括一个覆盖层和一个包含的元素，该元素应根据需要随页面滚动（我不希望在该 div 中发生任何滚动，它会调整大小以适应内容） .叠加层设置为 width=100% 和 height=100% 以覆盖整个页面。但是，当包含的 div 最终高于视口时，这会导致叠加层在视口高度之后停止。

这种解释有点糟糕，所以可能更容易理解我的意思，所以这里有一个简化的小提琴： http://jsfiddle.net/72SU5/

这是我正在使用的 CSS：

#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;
}

我的问题是，一旦隐藏的内容显示出来，我如何让叠加层扩展到 new 高度的 100%。我很好用 JS/jQuery 来完成这个。

或者，如果有更好的纯 CSS 方法需要重构，我也愿意接受。唯一的要求是，如果内容导致其超出视口，则覆盖的内容应随页面滚动。

Answer 1

将以下属性添加到您的 #overlay CSS 类：

overflow:auto;

Fiddle

Answer 2

您还可以从 #overlay 类中删除 height 属性。

http://jsfiddle.net/72SU5/6/

Answer 3

#overlay {
width: 100%;
height: auto;
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;
}