css - 将内容作为组件传递时无法使用 NgbModal 获得全屏模式

Question

我正在使用 Bootstrap 小部件并尝试创建一个全屏模式(页眉位于顶部，页脚位于底部，正文滚动位于中间)。我可以使用这里概述的一些简单的 html 轻松地做到这一点:

https://www.codeply.com/go/DLPXHfEIiS/bootstrap-4-full-screen-modal

但是，一旦我开始变得更复杂并想调用我自己的组件作为内容，它就不再有效了。该组件嵌套在模态内容的下一层，我相信这就是打破流程的原因。我正在尝试按照此处列出的说明进行操作:

https://ng-bootstrap.github.io/#/components/modal/examples#component

即使在上面的示例中，您也可以检查它并看到组件嵌套在 modal-content div 中。

效果(当尝试使用上面第一个链接中的方法进入全屏时)是模态、模态对话框和模态竞争全部进入全屏。但是，尽管我尝试将其设置为行为样式，但模态组件中的嵌套组件大小仍适合内容。

我在这里缺少什么明显的东西？提前致谢，周五快乐。

::编辑以覆盖评论中的限制::

CSS

.gr-modal-full .modal-dialog {
  min-width: 100%;
  margin: 0;
}
.gr-modal-full .modal-content {
  min-height: 100vh;
}

.TS调用组件

  const journalPopup = this.modalService.open(
    JournalPopupComponent,
    {windowClass: 'gr-modal-full', backdrop: false});
  journalPopup.componentInstance.journal = this.journal;

组件

import {Component, Input, OnInit} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {HttpClient} from '@angular/common/http';

@Component( {
  selector: `
  <div class="modal-header"></div>
  <div class="modal-body"></div>
  <div class="modal-footer"></div>
`,
  templateUrl: './journal.popup.component.html',
  styleUrls: ['./journal.popup.component.scss']
})

export class JournalPopupComponent implements OnInit {
  @Input() journal: any;
  constructor(public modal: NgbActiveModal) {}
  ngOnInit(): void {
  }
}

Answer 1

通过丢弃上面的代码并采用更老派的方式来获得答案。我只是使用 CSS 并使组件成为绝对的。只要我的页眉和页脚的高度不需要改变(我可以控制)，这就可以了。

感谢 John Paul Hennessy 和他的 codepen 在这个链接上给了我我需要的动力:https://codepen.io/yewnork/pen/Kpaqeq

.gr-modal-full .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.gr-modal-full .modal-dialog {
  position: fixed;
  margin: 0;
  min-width: 100%;
  height: 100%;
  padding: 0;
}

.gr-modal-full .modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
}

.gr-modal-full .modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  padding: 10px;
  border-radius: 0;
  //background: #6598d9;
}

.gr-modal-full .modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.gr-modal-full .modal-body {
  position: absolute;
  top: 81px;
  bottom: 61px;
  width: 100%;
  overflow: auto;
}

.gr-modal-full .modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  border-radius: 0;
  //background: #f1f3f5;
}