css：如何使定义为%-的height div的子级可以滚动，并且可见高度等于父级？

我有一个模式，显示内容设置为窗口高度的70%

此处附上代码笔：

我希望该模式内容的一部分有一个

overflow-y:scroll

，并且我希望该可滚动部分中的可见区域始终是父级的100%

当我尝试将可滚动部分的高度设置为

100%

时，它会变得非常大，以至于不再滚动，并将高度扩展到父元素的溢出隐藏之外。如果在浏览器中放大或缩小时将其设置为以像素为单位的固定高度，则在某些情况下，左div不能覆盖其父div的全部高度

---

我如何实现这样的行为，即无论用户用鼠标放大或缩小多远，左侧的浅绿色div始终是模式的全高（

70%

）并且有一个滚动条，允许在内容超出父模式高度时查看溢出？

如果我正确理解了您的问题，您需要：

滚动能力

具有类似于父级的固定高度

如果这是正确的，您可以使用VH作为测量值。VH表示视口，%表示父视口。如果正文为500vh，且分区的高度为100%，则该分区的高度将与5页的高度相同

正文{
背景色：#ffffee；
填充：0px；
}
.莫代尔{
位置：固定；
背景色：rgba（0,0,0,0.2）；
宽度：100%；
身高：100%
}
.modal页眉、.modal页脚{
背景色：rgb（255220190）
}
.模态页脚{
位置：绝对位置；
底部：0px；
宽度：100%
}
.模态内容{
高度：70vh；
背景色：白色；
位置：相对位置；
溢出y：隐藏；
}
.模态网格容器{
背景色：rgb（200255200）；
显示：网格；
网格模板柱：35fr 65fr；
}
.模态网格权{
身高：继承；
}
.模态网格左{
高度：70vh；
溢出y：滚动；
}
.模态网格权{
背景色：rgb（230255）；
}
.进度条{
宽度：20px；
高度：15vh；
背景色：红色；
位置：相对位置；
保证金：5px自动；
}

标题文本
这里有一个进度条

问题：如何使左侧区域中的可见区域始终保持与父div相同的高度，而不管用户是否显著放大或缩小？
这里有很多内容

这里有很多内容

这里有很多内容

这里有很多内容

页脚文本
这是一些网页内容可以定义可见区域吗？你是指除法还是进度条？你想让它们成为相对于缩放的动态大小，使它们看起来是静态的吗？谢谢你的解释！正是我需要的。