前端实现上中下布局 中间自适应

前端实现上中下布局，其中中间部分需要自适应宽度，通常可以使用 CSS 的 Flexbox 或者 Grid 布局来完成。以下是两种常见方法：

**Flexbox 方法**:

.container {
  display: flex;
  height: 100%; /* 设置容器高度 */
}

.header {
  flex: 0 0 auto; /* 上部元素固定高度 */
}

.middle {
  flex: 1; /* 中部元素自动填充剩余空间 */
  overflow: auto; /* 如果内容超过可用高度，添加滚动条 */
}

.footer {
  flex: 0 0 auto; /* 下部元素固定高度 */
}

在这个例子中，`.middle` 会根据父容器 `.container` 的剩余空间自适应宽度。

**Grid 方法**:

.container {
  display: grid;
  height: 100vh; /* 使用 viewport 单位确保自适应屏幕 */
  place-items: center; /* 确保内容居中对齐 */
}

.header, .footer {
  grid-row: 1 / span 2; /* 上部和下部分别占据一格，并跨越两行 */
}

.middle {
  grid-row: 2; /* 中部占一行 */
  overflow-y: auto; /* 同上部的注释 */
}

这里，`.middle` 的宽度同样会根据 `grid-template-columns` 的设置自动调整。