CODEWITHSUNDEEP
javascripthtmlcss
Th3o4oR
Th3o4oR

Reputation: 191

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

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>

Upvotes: 4

Views: 2766

Answers (2)

ndotie
ndotie

Reputation: 2150

Everything is on its place but you need to use position:fixed not 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;
}

when using absolute then you'll be placing your modal absolutely inside relative or fixed or another absolute positioned parent or grandparent of that modal,

but using fixed you're placing your modal relative to browser window not its div or other sorts of parent

Upvotes: 1

Youssouf Oumar
Youssouf Oumar

Reputation: 45883

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>

Upvotes: 2

Related Questions