我有一个使用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;
}
我的问题是,一旦隐藏的内容显示,我如何让覆盖扩展到新高度的100%。我很好使用JS/jQuery来完成这个。
或者,如果有更好的纯css方法需要重构,我也愿意接受。唯一的要求是,如果内容导致其扩展到视窗之外,则覆盖的内容与页面一起滚动。
添加以下属性到您的#overlay
CSS类:
overflow:auto;
小提琴
您还可以从#overlay
类中删除height属性。
#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;
}