Dynamic height with footer


I have a modal window whose size is dynamic and it has a scroll. The problem is that I can’t see the footer because the data list fills all the screen. I want to see all the time the footer.

Any idea?

Here is my css code:

.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 .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%;

The modal window content is very simple. In the content I have label and an ion-list and I have a footer with a div and inside an item with a button.


Finally I found a solution. I put this on my css file:

ion-footer {
position: sticky;