Menu
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>
765
asked Sep 17 '25 08:09
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
