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

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

本文关键字：高度 包括 元素 添加 100% 何调整 调整      更新时间：2023-09-26

我有一个使用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属性。

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

#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;
}
相关文章：