Question

问题

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

莫代尔的内容

在模态中

带有灰色背景的空叠加 /背景div，占据模式的整个宽度和高度。
内容本身可能最终的高度大于视口。

JS Fiddle

这是一个证明问题的JS小提琴。我添加了边框着色，以更好地帮助区分各个元素。

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

Answer 1

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

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

z-index未被应用，因为该位置是静态的，所以你需要添加position:relative
要激活滚动，您需要添加overflow:auto和a 固定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>

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

问题

莫代尔的内容

JS Fiddle

1 个答案: