css：如何使 %-defined height div 的子级可滚动，其可见高度等于父级？

Question

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

这里附上codepen：Link

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

当我尝试将可滚动部分的高度设置为100% 时，它变得如此之大以至于不再滚动，并将高度扩展到父元素的溢出隐藏之外。如果我将其设置为以像素为单位的固定高度，当我在浏览器中放大或缩小时，会出现左侧 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>