css:如何使%定义的高度div的子级可以滚动，其可见高度等于父级

Question

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

此处附加代码笔：链接

我希望该模态内容的一部分具有overflow-y: scroll，并且我希望该可滚动部分中的可见区域始终是父级的100%。

当我尝试将可滚动部分的高度设置为100%时，它会变大，以至于不再滚动，并将高度扩展到父元素的溢出隐藏之外。如果我将其设置为以像素为单位的固定高度，当我在浏览器中放大或缩小时，会出现左div无法覆盖其父div的全部高度的情况。

如何实现这样一种行为，即无论用户用鼠标放大或缩小多远，左侧的浅绿色div始终是模态(70%(的全高，并且有一个滚动条，当内容超出父模态的高度时，可以查看溢出？

Answer 1

如果我理解了你想要的问题：

1. 滚动功能
2. 具有与父对象相似的固定高度

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

body {
background-color: #ffffee;
padding:0px;
}
.modal {
position:fixed;
background-color:rgba(0,0,0,0.2);
width:100%;
height:100%
}
.modal-header, .modal-footer {
background-color:rgb(255,220,190)
}
.modal-footer {
position:absolute;
bottom:0px;
width:100%
}
.modal-content {
height:70vh;
background-color:white;
position:relative;
overflow-y: hidden;
}
.modal-grid-container {
background-color:rgb(200,255,200);
display:grid;
grid-template-columns: 35fr 65fr;
}
.modal-grid-right {
height:inherit;
}
.modal-grid-left{
height: 70vh;
overflow-y: scroll;
}
.modal-grid-right{
background-color:rgb(230,230,255);
}
.progress-bar {
width:20px;
height:15vh;
background-color:red;
position:relative;
margin: 5px auto;
}

<link rel="stylesheet" href="master.css">
<div class="modal">
<div class="modal-content">
<div class="modal-header">
Header Text
</div>
<div class="modal-body">
<div class="modal-grid-container">
<div class="modal-grid-left">
<p>Here's a progress bar</p>
<div class="progress-bar"></div>
<div class="progress-bar"></div>
<div class="progress-bar"></div>
<div class="progress-bar"></div>
<div class="progress-bar"></div>
</div>
<div class="modal-grid-right">
<h2> Question: How can I make the visible area in the left section always be the same height as the parent div, regardless of the user zooming in or out significantly?</h2>
<p>Lots of content here</p>
<p>Lots of content here</p>
<p>Lots of content here</p>
<p>Lots of content here</p>
</div>
</div>
</div>
<div class="modal-footer">
Footer text
</div>
</div>
</div>
<h1>This is some web content!</h1>