滚动 DIV 内容而不是浏览器 window

Question

我创建了一个模式window，它有页眉、正文和页脚。

我不需要滚动浏览器 window 我需要滚动模态框的正文。

注意Modal的Header和Footer应该是固定的，比如不能滚动。

我该怎么做？

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

您需要做两件事。当你的模式打开时首先设置正文溢出：

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

这将确保您的内容"behind"不会随着滚动而移动。

其次，您需要确保模态框周围的包装器允许溢出滚动。

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

Answer 2

检查更新的示例。

页眉和页脚 - 设置为 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>

滚动 DIV 内容而不是浏览器 window

Scroll DIV content instead of browser window

html

css

position