固定了可滚动内容上方的模式页脚

Question

我似乎无法使模态中的页脚固定在底部，而内容在下方滚动。

<div id="children-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
  <div class="modal-content">
    <h4 id="modal-title">What to do with your god damn kids</h4>
    <p id="modal-text">A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a id="close-modal-button" class="right waves-effect waves-white btn-flat" (click)="closeModal()">Close</a>
  </div>
</div>

.modal {
  width: 95%;
  padding: 0px;
}

.modal-content {
  height: auto !important;
  padding: 0px;
}

.modal-footer {
  position: fixed;
}

页脚消失。 有任何想法吗？

Answer 1

我正在依靠苏尼尔的答案。 除了使用bottom：0，还需要设置高度并消除.modal类上的溢出。 接下来，将内容的高度和溢出设置为自动，如下所示：

.modal {
position: fixed;
left:0;
right:0;
background-color: #fafafa;
max-height:70%;
height: 70%;
margin:auto
border-radius:2px;
will-change:top,opacity;
}

.modal-content[_ngcontent-c0]{
height:90%;
padding:0;
overflow: auto;
}

简而言之，您希望它滚动内容（而不是页脚），因此在此处放置高度和溢出（滚动条）。

Answer 2

您需要给底部：0; 进入模态页脚课程。