Прокрутка содержимого DIV вместо окна браузера

Question

Я создал модальное окно с заголовком, телом и нижним колонтитулом.

Вместо прокрутки окна браузера мне нужно прокрутить тело модала.

Обратите внимание, что верхний и нижний колонтитул модала должны быть исправлены, например, не прокручиваться.

Как я могу это сделать?

div.cover {
  background-color: rgba(0, 0, 0, 0.4); 
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: auto;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 200;  
}

div.modal {
  background-color: white;
  border: solid 1px blue;
  margin: 10% auto;
  max-width: 400px;
  padding: 0;
  width: 80%;
  z-index: 400;
}

div.header, div.body, div.footer {
  padding: 20px 0;
}

div.body {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

p {
  float: left;
  padding: 0;
  margin: 0;
}

a {
  float: right;
  display: block;
  padding: 0;
}

.clear:before, .clear:after {
  content: '';
  display: table;
  line-height: 0;
} 

.clear:after {
  clear: both;
}
 

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis. 
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. 
</p>
<div class="cover">
  <div class="modal">
    <div class="header clear">
      <p>Header</p>
      <a href="#">Close</a>
    </div>
    <div class="body">
      Body<br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. 
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>

Answer 1

Проверьте обновленный пример.

Верхний и нижний колонтитулы - Установите на position:absolute;

.cover {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  height: 100%;
  left: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 200;
}

.modal {
  background-color: white;
  margin: 10% auto;
  max-width: 400px;
  height: 60vh;
  max-height: 60vh;
  position: relative !important;
}

.scrollView {
  position: relative;
  border: 2px solid red;
  height: calc(60vh - 100px);
  margin: 50px 0;
  top: 50px;
  overflow: scroll;
  z-index: 800;
}

div.header {
  display: flex;
  align-items: center;
  height: 50px;
  max-height: 50px;
  top: 0;
  position: absolute;
  background: lightgreen;
  width: 100%;
  z-index: 900;
  justify-content: space-between;
}

.header div {
  padding: 0 20px;
}

div.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  height: 50px;
  background: orange;
  width: 100%;
}

.body {
  overflow-y: scroll;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
  <div class="modal">
    <div class="header">
      <div>Header</div>
      <div><a href="#">Close</a></div>
    </div>
    <div class="scrollView">
      <div class="body">
        Body<br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
        <br><br> LAST LINE OF BODY
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>

Answer 2

Есть две вещи, которые вам нужно сделать. Сначала установите переполнение тела, когда ваш модал открыт:

body{
    overflow: hidden; // inherit when modal is closed.
}

Это гарантирует, что ваш контент «позади» не будет перемещаться при прокрутке.

Во-вторых, вам нужно убедиться, что оболочка вокруг ваш модал разрешает свиток переполнения.

.modal-content-wrapper{
        width: 100%;
        height: 100%;
        overflow: scroll;
        ....
}