将模态放置在所有分辨率的底部

Question

I'm using react-bootstrap modal in my project. I need to place the modal at bottom of all the resolutions. For example, I can place the modal at bottom by changing css bottom property to -74% in 1080x1920 resolutions. But for other devices it is not the same.

<div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1" style="display: block; padding-left: 0px;">
   <div role="document" class="modal-dialog sc-modal">
      <div class="modal-content">...
      </div>
   </div>
</div>



.sc-modal{
    width:100% !important; 
    top: unset;
    bottom:0%;
    max-width: 1080px;
    left: 50%;
    transform: translate(-50%, 0) !important;
}

How to place the modal at the bottom for all device resolutions ?

Answer 1

position should help you fix the modal at the bottom of the window.

.modal.in .modal-dialog {
   position: fixed;       
   bottom: 0;
   left: 50%;
   transform: translate(-50%);
}