Angular如何让组件内元素自适应剩余视口高度且无纵向滚动

API 探路者

2026-9-26

Angular子组件元素自适应剩余视口高度解决方案

问题根源

你之前的写法出现溢出的核心原因有两个：

100vh是完整视口高度，已经占用了7vh作为头部，本身就多计算了7vh的高度，再加上mat-sidenav-content的2%上下内边距、子组件内h3、hr的固有高度，自然会溢出出现滚动条
height:100%生效的前提是所有父级容器都有明确的高度定义，你没有设置子组件根元素、mat-sidenav-content容器的高度属性，导致百分比高度不生效

最优实现方案（Flex布局方案，无需手动计算高度）

第一步：修改`app.component.css`

给mat-sidenav-content的容器类添加高度、盒模型和flex布局配置：

.component {
  background-color: white;
  padding: 2%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* 内边距计入元素总高度，不会额外撑高容器 */
}

第二步：修改`home.component.css`

用:host选中子组件根元素配置占满父容器，再给目标div设置弹性填充：

/* 选中当前子组件的根元素，占满父容器高度 */
:host {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.testing {
  background-color: red;
  flex: 1; /* 自动占用容器内除了h3、hr之外的所有剩余高度 */
  overflow: hidden; /* 如果不需要内部滚动就用hidden，需要就改成auto */
  min-height: 0; /* 兼容低版本浏览器flex布局高度溢出问题 */
}