height:100%/100vh内容超出屏幕，如何限制高度不覆盖footer？

核心思路 #

通过CSS布局将页面划分为「头部（可选）- 主体内容区 - footer」结构，固定footer在视口底部，让主体内容区自动填充footer上方的剩余空间，内容超出时自动显示滚动条，避免超出footer。

具体实现方案 #

方案1：Flexbox布局（推荐） #

1. 给页面根容器（如body或最外层容器）设置垂直Flex布局，确保容器占满视口高度
2. 固定footer高度并禁止其被压缩
3. 让主体内容区填充footer上方剩余空间，超出部分显示垂直滚动条

示例代码：

/* 根容器 */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* footer样式 */
footer {
  height: 60px;
  flex-shrink: 0; /* 防止footer被压缩 */
  background-color: #f1f1f1;
}

/* 包含#two的内容容器 */
.content-wrap {
  flex: 1; /* 填充footer上方的剩余空间 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  padding: 16px;
}

#two {
  /* 无需设置height:100%，继承父容器高度即可 */
}

方案2：Grid布局 #

1. 用Grid将页面分为两行，第一行分配剩余空间，第二行适配footer高度
2. 主体内容区设置滚动属性

示例代码：

body {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

footer {
  height: 60px;
  background-color: #f1f1f1;
}

.content-wrap {
  overflow-y: auto;
  padding: 16px;
}

关键注意事项 #

• 不要给#two直接设置height:100%，否则会基于自身内容高度计算，导致超出footer
• 根容器必须设置min-height:100vh，保证页面至少占满视口高度
• 若页面有头部导航栏，只需给头部添加flex-shrink:0（Flex方案），主体内容区依然用flex:1填充剩余空间即可

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