Модальное окно с динамической высотой и нижним колонтитулом

Question

У меня есть модальное окно с динамическим размером и прокруткой. Проблема в том, что я не вижу нижний колонтитул, потому что список данных заполняет весь экран. Я хочу видеть все время нижний колонтитул.

Есть идеи?

Вот мой код CSS:

.own-modal { 
          @media (min-height: 320px) { 
            ion-backdrop { 
              visibility: visible; 
             } 
          }

          position: absolute; 
          top: 0;
          right: 0; 
          bottom: 0; 
          left: 0; 
          display: flex; 
          align-items: center; 
          justify-content: center;
          contain: strict; 
          
          .modal-wrapper { 
              &, .ion-page, 
              .ion-page .content, 
              .ion-page .content .scroll-content { 
                contain: content; 
                position: relative; 
                top: auto; 
                left: auto; 
             } 
           
             display: flex; 
             overflow: auto; 
             flex-direction: column; 
             max-height: 100%; 
             opacity: 0; 
             height: auto; 
             max-width: 100%; 
         } 
    }

Содержимое модального окна очень простое. В содержании у меня есть метка и список ионов, и у меня есть нижний колонтитул с div и внутри элемента с кнопкой.

Answer 1

Ну, если вы хотите видеть нижний колонтитул все время, вы должны использовать фиксированную позицию:

footer {
   position: fixed;
   width: 100%;
   bottom: 0;

}

Answer 2

Со следующим кодом нижний колонтитул статичен в конце окна. Поместите его в конец файла:

ion-footer {position: sticky;}

Подробнее об этом объекте:

https://www.w3schools.com/howto/howto_css_sticky_element.asp