Angular中matDialog弹窗内带样式空div不显示的问题咨询

你的空div无法显示的核心原因是height: 100%属于相对高度，仅在父元素有明确可计算高度时才会生效，你当前代码中.curves、.curves-last的所有上层父元素都未设置固定高度，导致浏览器计算出这两个容器的高度为0，内部的彩色div自然不可见。

你可以根据需求选择以下任意一种方案修复：

• 方案1：快速固定高度
  直接给彩色div设置固定高度替换百分比高度，适配你需要的尺寸即可，示例修改如下：

<!-- 顶部curves -->
<div class="curves">
  <div class="first-curve" style="background-color: red;width: 10px;height: 40px;"></div>
  <div class="second-curve" style="background-color: blue;width: 10px;height: 40px;"></div>
</div>

<!-- 底部curves-last -->
<div class="curves-last" style="display:flex;width: 100%;height: 40px;justify-content: flex-end;">
  <div class="first-curve" style="background-color: red;width: 10px;height: 100%"></div>
  <div class="second-curve" style="background-color: blue;width: 10px; height: 100% "></div>
</div>

• 方案2：保留百分比高度，逐层补全父元素高度
  需要从最外层开始给所有父元素设置可计算高度，同时打开弹窗时指定弹窗高度：

1. 调用matDialog打开弹窗的代码中添加高度配置：

this.dialog.open(YourComponent, {
  height: '600px', // 按需求调整高度
  // 其他原有配置
})

2. 给弹窗内的父元素逐层设置高度：

<div class="container" style="height: 100%;">
    <div class="upload-section" mat-dialog-content style="height: 100%;">
        <div class="upload-form" style="height: calc(100% - 40px);"> <!-- 减去底部curves的高度预留空间 -->

• 方案3：如果需要curves和表单高度自动对齐
  将.upload-form设置为flex布局，flex子元素默认会自动撑满高度，不需要手动设置百分比：

<div class="upload-form" style="display: flex; gap: 16px;">
  <div class="curves">
    <div class="first-curve" style="background-color: red;width: 10px;"></div> <!-- 不需要设置height -->
    <div class="second-curve" style="background-color: blue;width: 10px;"></div> <!-- 不需要设置height -->
  </div>
  <form>
    <!-- 原有表单内容 -->
  </form>
</div>

修改后可以打开浏览器开发者工具（F12），选中对应curves的div元素，查看盒模型的高度属性是否为非0值，确认样式生效即可。

内容的提问来源于stack exchange，提问作者Mukesh Raj