如何设置静态视图间响应式视图的高度及列表元素适配？

问题1：计算中间响应式视图的高度 #

因为顶部Headline（3rem）和底部导航（3.5rem）是固定高度，中间区域需要适配不同屏幕占满剩余空间，有两种简洁可靠的实现方式：

方式1：用calc()结合视口高度 #

先消除页面默认边距，确保根元素占满屏幕高度，再通过calc()直接计算中间区域的高度：

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.headline {
  height: 3rem;
}

.bottom-nav {
  height: 3.5rem;
}

.scroll-container {
  /* 减去上下固定元素的高度 */
  height: calc(100vh - 3rem - 3.5rem);
  overflow-y: auto;
  background-color: lightblue;
}

方式2：Flexbox布局（推荐） #

将整个页面容器设为垂直方向的flex布局，上下元素设置flex-shrink: 0防止被压缩，中间区域用flex: 1自动填充剩余空间，无需手动计算数值：

html, body {
  min-height: 100vh;
  margin: 0;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.headline {
  height: 3rem;
  flex-shrink: 0;
}

.scroll-container {
  flex: 1;
  overflow-y: auto;
  background-color: lightblue;
}

.bottom-nav {
  height: 3.5rem;
  flex-shrink: 0;
}

问题2：最大化显示完整的绿色列表元素 #

每个列表元素固定7rem高度，要避免截断，核心是让容器只显示整数个完整元素，超出部分滚动，推荐用CSS Grid实现：

.scroll-container {
  /* 继承上述flex或calc的高度设置 */
  display: grid;
  /* 自动计算能容纳多少行，每行高度7rem */
  grid-template-rows: repeat(auto-fill, 7rem);
  gap: 0.5rem; /* 可选，元素间的间距 */
  overflow-y: auto;
  padding: 0.5rem;
}

.list-item {
  height: 7rem;
  background-color: green;
}

如果偏好Flexbox，也可以这样写（垂直堆叠元素，超出滚动）：

.scroll-container {
  /* 继承上述flex或calc的高度设置 */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding: 0.5rem;
}

.list-item {
  height: 7rem;
  flex-shrink: 0; /* 禁止元素被压缩 */
  background-color: green;
}

这两种方式都会保证容器内显示的都是完整的7rem高度元素，多余的元素会被隐藏在滚动区域内，不会出现截断情况。

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