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

I have a modal for editing some content, and while I want the background for the modal to fill the entire visible screen, the form (or modal content, whatever you want to call it) has a fixed height. Issues arise when resizing the window, and the page underneath the modal is the same height as the window, but smaller than the form. What ends up happening is the background only covers a visible portion of the screen, and never the whole thing.

JSFiddle which shows what happens: https://jsfiddle.net/yzhm7v12/3/
When you scroll, part of the background doesn't show at the bottom. How can I make it stretch to fill the entire height of the body element?

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 >
    <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 >
    <div >
    </div>
  </div>
</body>

CodePudding user response：

You could resolve this issue by setting on the modal a position fixed instead of an absolute one as you did. Like so:

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 >
 <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 >
 <div >
 </div>
</div>