Angular Flex布局问题：三Div实现下Div贴底，中间Div动态自适应

这其实是个非常常见的「上下固定、中间自适应填充」布局场景，Angular Flex Layout用几行指令就能轻松搞定，完全符合你的需求——下方div始终贴靠容器底部，中间的空间会自动根据上下div的占用高度调整。

实现步骤和代码示例 #

首先，你需要确保容器是一个垂直方向的flex容器，并且占满可用空间，然后给中间的div加上自适应填充的指令就行：

模板代码 #

<!-- 外层容器：垂直flex布局，占满父元素空间 -->
<div fxLayout="column" fxFill style="height: 100vh;">
  <!-- 顶部div：高度由自身内容决定 -->
  <div class="top-section">
    这里是顶部内容，高度随内容变化
  </div>

  <!-- 中间自适应空间：自动填充上下div之外的剩余区域 -->
  <div fxFlex class="middle-section">
    我是中间的自适应空间，会自动填满剩下的位置
  </div>

  <!-- 底部div：始终贴靠容器底部 -->
  <div class="bottom-section">
    这里是底部内容，永远粘在容器最下方
  </div>
</div>

关键指令解释 #

• fxLayout="column"：把外层容器的flex布局方向设为垂直，让三个div从上到下排列。
• fxFill：让容器占满父元素的全部可用空间（这里我直接加了style="height:100vh"让它占满整个视口高度，如果你是在某个父容器内，只要父容器有明确高度，fxFill就会适配）。
• fxFlex：给中间的div加上这个指令后，它会自动抢占容器中除了上下div之外的所有剩余空间——不管上下div的高度怎么变（比如顶部内容变多、底部加了新元素），中间区域都会自动调整，底部div自然就牢牢贴在容器底部了。

配套样式（可选，方便看效果） #

/* 确保根元素占满视口，避免默认边距影响 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.top-section {
  padding: 1.5rem;
  background-color: #f5f5f5;
}

.middle-section {
  padding: 1.5rem;
  background-color: #eeeeee;
}

.bottom-section {
  padding: 1.5rem;
  background-color: #e0e0e0;
}

额外说明 #

如果你的容器不是全屏，而是嵌套在某个有固定高度的父组件里，只要把外层容器的style="height:100vh"去掉，保留fxFill，同时确保父容器设置了明确的高度（比如height: 500px），这个布局逻辑依然生效。

内容的提问来源于stack exchange，提问作者Deniss M.