如何用Flex布局实现顶部底部栏+中间自适应内容的页面结构？

需求说明 #

• NAV BAR 固定在页面最顶部
• TITLE BAR 位于 NAV BAR 下方
• COMMAND BAR 固定在页面最底部
• STATUS BAR 位于 COMMAND BAR 上方
• 中间的 CHART 和 GAUGE 填充剩余全部宽高

布局示例 #

|-----------------------------------|
|             NAVBAR                |
|-----------------------------------|
|           TITLE BAR               |
|-----------------------------------|
|                                   |
|             ↑                     |
|  <-  CONTENT (CHART + GAUGE) ->   |
| (fill remaining height and width) |
|             ↓                     |
|                                   |
|                                   |
|                                   |
|-----------------------------------|
|         STATUS BAR                |
|-----------------------------------|
|         COMMAND BAR               |
|-----------------------------------|

原代码问题分析 #

1. 根元素高度缺失：html 和 body 默认无全屏高度，导致 .container 的 height:100% 无法继承到全屏尺寸
2. 属性拼写错误：.container 中的 backgroud-color 应为 background-color
3. 横向溢出隐患：.content 同时设置 width:100% 和 padding，未启用边框盒模型，导致内容超出容器
4. 内容区高度继承失效：.content 未设为 flex 容器，内部 .blocks 的 height:100% 无法正确填充剩余空间

修复后的代码 #

CSS 代码 #

/* 根元素设置全屏高度并清除默认边距 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: grey; /* 修正拼写错误 */
}

.nav {
  background-color: yellow;
}

.title {
  background-color: orange;
}

.content {
  padding: 10px;
  flex-grow: 1; /* 填充剩余高度 */
  overflow: hidden;
  box-sizing: border-box; /* 避免padding导致横向溢出 */
  display: flex; /* 让内部元素自动填充高度 */
}

.status {
  background-color: orange;
}

.footer {
  background-color: red;
}

.blocks {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.chart {
  padding: 10px;
  flex: 4;
  background-color: green;
  box-sizing: border-box;
}

.gauge {
  padding: 10px;
  flex: 2;
  background-color: brown;
  box-sizing: border-box;
}

HTML 代码 #

<div class="container">
  <div class="nav">
    NAV BAR
  </div>
  <div class="title">
    TITLE BAR
  </div>
  <div class="content">
    <div class="blocks">
      <div class="chart">
        CHART
      </div>
      <div class="gauge">
        GAUGE
      </div>
    </div>
  </div>
  <div class="status">
    STATUS BAR
  </div>
  <div class="footer">
    COMMAND BAR
  </div>
</div>

关键修复点说明 #

• 给 html 和 body 设置全屏高度，确保 .container 能继承到页面完整尺寸
• 修正背景色属性拼写错误，恢复容器背景显示
• 启用 box-sizing: border-box，让内边距包含在元素宽高内，避免横向溢出
• 将 .content 设置为 flex 容器，内部 .blocks 自动填充其父级高度，无需手动设置 height:100%
• 移除冗余的 width:100% 和 height:auto，利用 flex 布局默认的拉伸特性简化代码

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