Tengo un modal para editar algún contenido, y aunque quiero que el fondo del modal llene toda la pantalla visible, el formulario (el contenido modal) tiene una altura fija.
Surgen problemas cuando la ventana gráfica tiene una altura más pequeña. Hay un desplazamiento después de abrir el modal, y cuando se desplaza, parte del fondo no se muestra en la parte inferior.
¿Cómo puedo hacer que se estire para llenar toda la altura del elemento del cuerpo? Aquí hay un JSFiddle y mi código a continuación:
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>Puede resolver este problema configurando en el modal una posición fija en lugar de una absoluta como lo hizo. Al igual que:
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>Todo está en su lugar, pero debe usar la position:fixed no 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; } cuando use absolute , colocará su modal absolutamente dentro relative or fixed or another absolute de ese modal,
pero al usar fixed , está colocando su modal en relación con la browser window no su div u otro tipo de padre