Question

我有一个使用JS动态添加的div，它包含一个叠加层和一个包含的元素，该元素应该根据需要滚动页面（我不希望在该div中发生任何滚动，调整大小以适应内容）。叠加设置为宽度= 100％，高度= 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;
}

如何调整100％高度以包括添加元素的高度

3 个答案: