纯CSS实现响应式Angular表格布局的高度控制问题求助

完全可以用纯CSS实现需求，无需监听resize事件。核心思路是用CSS Grid控制父容器的响应式排列，结合Flex布局让表格组件内部自适应高度，同时利用CSS的min()函数实现列表的最大高度限制。

步骤1：改造父容器布局 #

替换原Bootstrap的row，用CSS Grid实现响应式的并排/上下排列，同时控制高度分配：

.table-container {
  display: grid;
  gap: 1rem; /* 组件间的间距，可调整 */
  height: 100vh; /* 占满整个视口高度 */
  padding: 1rem; /* 避免内容贴视口边缘 */
  box-sizing: border-box;
}

/* 对应Bootstrap xl断点（≥1200px），两组件并排，比例4/8 */
@media (min-width: 1200px) {
  .table-container {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
  }
}

/* 小于xl断点，两组件上下排列，列表最大占30vh，详情占剩余空间 */
@media (max-width: 1199px) {
  .table-container {
    grid-template-columns: 1fr;
    grid-template-rows: min(auto, 30vh) 1fr;
  }
}

对应的HTML结构：

<div class="table-container">
  <app-list></app-list>
  <app-detail></app-detail>
</div>

步骤2：组件内部表格布局（每个组件通用） #

给app-list和app-detail组件添加内部样式，让表头固定、tbody滚动，且自适应组件高度：

/* 组件宿主元素 */
:host {
  display: flex;
  flex-direction: column;
  height: 100%; /* 占满Grid分配的单元格高度 */
}

table {
  width: 100%;
  table-layout: fixed;
  flex: 1;
  display: flex;
  flex-direction: column;
}

thead {
  flex-shrink: 0; /* 表头不被压缩 */
}

tbody {
  flex: 1;
  overflow-y: auto;
  display: block;
}

/* 保持表格行宽度一致 */
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

效果说明 #

1. xl断点并排模式：两个组件各占视口高度，tbody自动填充组件高度减去表头的空间，滚动正常。
2. 上下排列模式：
   • 若app-list条目少，列表高度自适应内容，app-detail占满剩余视口空间（比例可达10/90）。
   • 若app-list条目多，列表高度被限制在30vh，tbody滚动，app-detail占剩余70vh空间（比例30/70）。
3. 组件独立性：每个组件仅需处理自身的表格布局，无需依赖外部媒体查询或容器查询，可单独复用。

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