固定模式在溢出视口时不会滚动

Question

问题

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

模态内容

模态内有

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

JS Fiddle

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

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

Answer 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>

固定模式在溢出视口时不会滚动

Fixed modal wont scroll when overflowing the viewport

html

css

scroll

modal-dialog

css-position

问题

模态内容

JS Fiddle