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

我建立了sunil的答案。除了使用bottom：0之外，还需要设置一个高度并删除.modal类的溢出。接下来，在内容上设置高度和溢出为auto，如下所示：

.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;到你的模态页脚课程。

修复了可滚动内容

2 个答案: