如何为UIkit的uk-modal组件中的uk-modal-body设置合适高度？

问题描述 #

我正在尝试用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刚好撑满模态窗口剩余空间并支持滚动，同时不会挤占底部边距？

解决方案 #

问题核心是模态框内部用了普通流百分比高度布局，子元素高度撑满时会直接溢出父容器，没有做溢出控制。推荐用弹性布局方案改造，兼容性好且不需要手动计算固定高度：

修改后代码 #

<div id="adjust-export-modal" uk-modal>
  <div class="uk-modal-dialog" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
    <button
      class="uk-modal-close-default"
      type="button"
      uk-close
      #close
    ></button>
    <div class="uk-modal-header">
      <h2 class="uk-modal-title">调整导出报表</h2>
    </div>
    <div class="uk-modal-body" style="flex: 1; overflow-y: auto; padding: 0;">
      <app-report-grid
        [companyId]="companyId"
      ></app-report-grid>
    </div>
  </div>
</div>

关键修改说明 #

• 移除了原来包裹按钮、头部和内容区的冗余100%高度div，该div采用普通流布局，是导致内容溢出的核心原因
• 给uk-modal-dialog添加display: flex; flex-direction: column属性，让内部元素按纵向弹性排列
• 给uk-modal-body添加flex: 1属性，会自动占用模态框去掉头部、关闭按钮高度后的所有剩余空间
• 给uk-modal-body添加overflow-y: auto属性，当<app-report-grid>内容高度超过body可用高度时会自动触发纵向滚动，不会超出模态框边界，也不会挤占底部边距

如果需要保留原来的包裹div，直接给包裹div加上同样的flex属性即可实现相同效果。如果你的<app-report-grid>本身设置了固定高度，记得把它的高度调整为100%，就能完全占满内容区空间。

内容的提问来源于stack exchange，提问作者Simon Gerasimenko