如何使标题 div 大小固定且正文可滚动？答案

【问题标题】：How to make header div size fixed and body as scrollable?如何使标题 div 大小固定且正文可滚动？
【发布时间】：2019-04-30 06:01:36
【问题描述】：

Here is the sample code for that: its just a sample:
<div class="main">
<div class="header">
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
Header<br>
</div>
<div class="footer">
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
Footer<br>
</div>
</div>

css:
.header{
  overflow: hidden;
}
.footer{
  overflow-y: scroll;
}
.main{
  overflow-y:hidden;
}

JSFiddle 我有一种情况，我不知道我的 div 大小 parent ，它是用 iframe 编写的，我正在插入 angular iframe 中的模板，但我能够修复标题，但我不能让它滚动。我可以通过提供使其可滚动 div 中的高度，因为我无法做到这一点

【问题讨论】：

嗨皮特，很抱歉没有正确的格式，不适应stackoverflow

标签： html css angular flexbox bootstrap-4

【解决方案1】：

通过 NPM 使用无限滚动：- InfiniteScrollModule

从 'ngx-infinite-scroll' 导入 { InfiniteScrollModule };

并且还使用 CSS 来固定身体。

像这样：-

.modal{display: block !important; }

.modal-header .close{margin-top:0px;}

.modal-dialog{ 溢出-y: 初始 !important}

.modal-body{ 高度：20rem;溢出-y：自动；}

【讨论】：