css：如何使％定义的高度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>