固定模态在溢出视口时不会滚动答案

【问题标题】：Fixed modal wont scroll when overflowing the viewport固定模态在溢出视口时不会滚动
【发布时间】：2018-11-05 19:03:37
【问题描述】：

问题

我制作了一个固定模式来显示页面的主要内容。模态框的内容的高度可能最终大于视口，因此需要滚动，但它只是不起作用。

模态的内容

模态框内是

一个空的overlay/background div，背景为灰色，占据了模态框的整个宽度和高度。
内容本身的高度可能最终会大于视口。

JS 小提琴

这是一个演示问题的 JS Fiddle。我添加了边框颜色以更好地区分各个元素。

https://jsfiddle.net/mLjs49ms/7/

【问题讨论】：

标签： html css scroll modal-dialog css-position

【解决方案1】：

您需要将此 css 属性添加到 modal__content ：

  position:relative;
  overflow:auto;
  height:100%;

z-index 没有被应用，因为位置是静态的，所以你需要加position:relative
要激活滚动，您需要同时添加 overflow:auto 和固定height 的100%
不要忘记你应该修复模态父级的height 模态到100% 以及

查看结果：

html,
body {
  width: 100%;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: consolas;
}

.main {
  border: 2px solid blue;
}

.modal {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

.modal__overlay {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(138, 138, 138, 0.5);
  border: 2px dashed green;
}

.modal__content {
  z-index: 2;
  border: 2px dotted blue;
  position: relative;
  overflow: auto;
  height: 100%;
}

.simulate-content {
  width: 120px;
  height: 200px;
  margin: 12px auto;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(255, 50, 50);
}

<body>
  <!-- PLACEHOLDER CONTENT -->
  <div class='main'>
    <h3> BODY CONTENT </h3>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

  <!-- THE MODAL -->
  <div class='modal'>
    <div class='modal__overlay'></div>
    <div class='modal__content'>
      <p class='simulate-content'>MODAL CONTENT 1 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 2 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 3 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 4 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 5 of 5</p>
    </div>
  </div>
</body>

【讨论】：

谢谢，它有效。你介意解释一下为什么吗？根据我的理解，您似乎正在滚动 modal__content 而不是 modal 父级本身...。但是为什么在父级和父级上都需要 height: 100%内容？他们不应该自己扩大以匹配孩子的身高吗？有人会认为min-height: 100% 会解决这个问题吗？
由于模态包含两个元素 modal_overlay 和 modal_content，唯一合乎逻辑的是只滚动内容而不是两者，并且使用 min-height 不会限制模态的高度，因此滚动条不会除非高度受限且内容超过固定高度时才会显示