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

Issue

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 (the modal content) has a fixed height.

Issues arise when the viewport has a smaller height. There is a scroll after opening the modal, and 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? Here is a JSFiddle and my code below:

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>

Solution

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

Answered By – yousoumar

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.