如何使模态背景填满整个页面，即使有滚动条？

Question

我有一个用于编辑某些内容的模式，虽然我希望模式的背景填满整个可见屏幕，但表单（模式内容）具有固定的高度。

视口的高度较小时会出现问题。打开模态框后有滚动条，滚动时底部有部分背景没有显示

我怎样才能让它伸展到填充 body 元素的整个高度？这是 JSFiddle 和我的代码如下：

document.addEventListener('click', function() {
  const modal = document.querySelector('.modal');
  modal.classList.toggle('hidden');
});

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
}

.flex {
  width: 100%;
  height: 100vh;
  background-color: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

.modal_content {
  margin: auto 0;
  width: 100px;
  height: 300px;
  background-color: #999999;
  border: 3px solid red;
}

<body>
  <div class="flex">
    <p>Click anywhere in the document to add/remove the modal</p>
    <p>Resize the window so the modal is too tall, then try to scroll</p>
  </div>
  <div class="modal hidden">
    <div class="modal_content">
    </div>
  </div>
</body>

Answer 1

您可以通过在模态上设置固定位置而不是像您那样设置绝对位置来解决此问题。像这样：

document.addEventListener('click', function() {
    const modal = document.querySelector('.modal');
  modal.classList.toggle('hidden');
});

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
}
.flex {
  width: 100%;
  height: 100vh;
  background-color: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal {
  position: fixed; /* line I changed */
  overflow:auto; /* line I added */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
}
.modal.hidden {
  display: none;
}
.modal_content {
  margin: auto 0;
  width: 100px;
  height: 300px;
  background-color: #999999;
  border: 3px solid red;
}

<div class="flex">
 <p>Click anywhere in the document to add/remove the modal</p>
 <p>Resize the window so the modal is too tall, then try to scroll</p>
</div>
<div class="modal hidden">
 <div class="modal_content">
 </div>
</div>

Answer 2

一切就绪，但您需要使用 position:fixed 而不是 absolute

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
}

当使用 absolute 时，您将绝对将模态放置在 relative or fixed or another absolute 定位的该模态的父级或祖父级中，

但使用 fixed 时，您是将模态相对于 browser window 放置，而不是其 div 或其他类型的父项

如何使模态背景填满整个页面，即使有滚动条？

How to make a modal background fill the entire page, even when there is a scroll?

html

javascript

css