css - 具有动态高度和页脚的模态窗口

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

模态窗口内容非常简单。在内容中，我有标签和 ionic 列表，还有一个带 div 的页脚和一个带按钮的元素。

Answer 1

好吧，如果你想一直看到页脚，那么你应该使用固定位置:

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