position-sticky-in-fixed-container-ref.html (727B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <style> 5 .modal { 6 bottom: 0; 7 left: 0; 8 right: 0; 9 position: fixed; 10 } 11 12 .modal-dialog { 13 position: relative; 14 overflow: auto; 15 max-height: 400px; 16 transform: translateY(0); 17 } 18 19 .modal-content { 20 background-color: purple; 21 height: 300px; 22 } 23 24 .modal-footer { 25 height: 100px; 26 background-color: blue; 27 } 28 29 .additional-content { 30 height: 100px; 31 background-color: purple; 32 } 33 </style> 34 <div class="modal"> 35 <div class="modal-dialog"> 36 <div class="modal-content"></div> 37 <div class="modal-footer"></div> 38 <div class="additional-content"></div> 39 </div> 40 </div>