css: Как сделать так, чтобы дочерний элемент div-определяемой высоты прокручивался с видимой высотой, равной родительской?

Question

У меня есть модал с отображаемым содержимым, установленным на 70% высоты окна.

Прикрепленный кодовый элемент здесь: Ссылка

Я хочу получить часть этого модального содержимого имеет 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>