CSS 100vh响应式问题：图片溢出头部的原因及解决方法

咱们先拆解下为啥会出现图片覆盖header的情况：

• 你给.container设置的高度是calc(100vh - 50px)，这个高度是固定基于当前视口高度计算的，完全不考虑内部内容的实际尺寸。
• 当你垂直缩小窗口时，.container的高度会跟着同步变小，但如果里面的图片+文字总高度超过了缩小后的container高度，再加上你用了align-items: center的flex布局，内容会向上下两个方向溢出container的边界。
• 因为header在container的上方，溢出的顶部内容自然就会覆盖到header区域，而且你没给container设置溢出处理逻辑，浏览器不会自动生成滚动条，问题就更突出了。

方案一：给container添加溢出滚动（快速修复） #

直接修改现有CSS，给.container加上overflow: auto，这样当内容超过container高度时，内部会出现滚动条，内容不会溢出到外部覆盖header：

.container { 
  display: flex; 
  justify-content: center; 
  width: 100%; 
  align-items: center; 
  height: calc(100vh - 50px); 
  overflow: auto; /* 新增这一行 */
}
.container__img { display: flex; flex-direction: column; }
.header { background-color: red; padding: 25px; }

方案二：改用全页面flex布局（更推荐的自适应方案） #

这种方式不需要硬算100vh，让页面结构自动适配剩余空间，灵活性更高：

1. 先给html和body设置基础样式，消除默认边距并启用垂直方向的flex布局：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

2. 调整header和container的样式：

.header { 
  background-color: red; 
  padding: 25px;
  /* 这里可以让header高度自适应内容，也可以固定高度比如height: 50px; */
}
.container { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex: 1; /* 自动占据header之外的所有剩余空间 */
  overflow: auto; /* 内容超出时仅在container内部滚动 */
}
.container__img { display: flex; flex-direction: column; }

这样不管窗口怎么调整，container都会自动占满header剩下的空间，内容超出时只会在container内部滚动，绝对不会覆盖header区域。

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