Html 固定模式页脚以上的滚动内容

我似乎无法让我的模式中的页脚固定在底部，内容在下面滚动

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

你他妈的孩子怎么办
一堆文本
接近
.莫代尔{
宽度：95%；
填充：0px；
}
.模态内容{
高度：自动！重要；
填充：0px；
}
.模态页脚{
位置：固定；
}

---

页脚消失了。有什么想法吗？

你需要给出底部：0；给你的modal footer类。

我正在根据sunil的答案构建。除了使用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;
}

---

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

感谢您的回复，这使页脚可见，但它与内容一起滚动。您可以为其发布JSFIDLE链接吗？我复制了上面的代码，并尝试在JSFIDLE中运行它。模态页脚div粘贴到底部。两个位置：fixed和bottom:0都需要应用。嗯，当我将代码粘贴到其中时，它在小提琴上工作，但在我这边不行，我不明白为什么。这是页面和代码。有什么想法吗？完全从CSS中删除.modal footer类。位置：修复不起作用，因为它的意思就是这样。它是固定的，一旦你的模态改变了它的尺寸，你的布局就消失了，但是现在，只有当我滚动到模态内容的底部时，才能找到页脚，而不是一直在那里，只有模态内容滚动将固定高度属性设置到模态内容，然后添加overflow-y:scroll属性。