如何在 uk-modal 中为 uk-body 设置正常高度？

Question

我正在尝试使用 uiKit 制作功能模式窗口。这是一个模态：

这是它的主体：

这是我为此模式编写的代码：

<div id="adjust-export-modal" uk-modal>
  <div class="uk-modal-dialog" style="width: 100%; height: 100%;">
    <div style="width: 100%; height: 100%;">
      <button
        class="uk-modal-close-default"
        type="button"
        uk-close
        #close
      ></button>
      <div class="uk-modal-header">
        <h2 class="uk-modal-title">Adjust exported report</h2>
      </div>
      <div class="uk-modal-body" style="/*width: 100%; height: 100%;*/ padding: 0">
        <app-report-grid
          [companyId]="companyId"
        ></app-report-grid>
      </div>
    </div>
  </div>
</div>

<app-report-grid> 在截图中不起作用，但是当它起作用时，它会占用 uk-modal-body 的所有蓝色空间并占用所有底部边距。

我应该怎么做才能使 uk-modal-body 留在模态边缘内？或者有一个不同的可能选项：我应该怎么做才能使 uk-modal-body 扩展精确模态并使其可滚动，而不占用底部边距？

Answer 1

尝试向 uk-modal-dialog

添加特定的高度和宽度

.uk-modal{
    display:block;
}

.uk-modal-dialog {
    width: 60vw;
    min-width: 600px;
    height: 500px;
}

这将使您的内部模态上下文了解 100% 是其实际大小的 100%，因为有时当一切设置为 100% 时，它只会呈现默认值。 如果不是这样，也将 display:block 添加到模态。

如果这不起作用，请尝试将 size 设置为 .uk-modal-body，然后将 .uk-modal-dialog 的高度设置为 身高：适合内容。这会根据内容大小自动调整对话框高度。

.uk-modal-dialog{
    height: 500px;
    max-height: 500px;
    width: 600px;
    max-width: 600px;
}

.uk-modal-dialog {
    width: fit-content;
    height: fit-content;
}