设置100%总高度仍出现垂直滚动条？Flex布局问题排查与解决

问题原因 #

你遇到的垂直滚动条，核心是**html/body的高度设置与.main的100vh设置冲突**，再加上浏览器隐性默认样式的潜在影响：

• 你同时给html, body设了height: 100%（等于视口高度），给.main设了height: 100vh（同样是视口高度）。但body作为.main的父元素，双重高度定义可能导致容器计算高度时出现偏差，哪怕你重置了全局margin，部分浏览器的隐性样式仍可能让整体高度超出视口。
• 另外，flex项目默认min-height: auto，若content内的内容意外撑开高度（哪怕内容很少），也会导致容器溢出触发滚动条。

正确实现方案 #

方案1：基于视口高度的弹性布局（推荐） #

去掉html, body的height: 100%，用min-height: 100vh确保.main至少占满视口，内容超出时自动撑开页面：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* 重置全局padding，避免隐性样式干扰 */
}

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

.header {
  background-color: lightyellow;
  height: 170px;
}

.content {
  background-color: lightpink;
  flex-grow: 1;
  /* 可选：内容过多时，仅在content内部出现滚动条 */
  /* overflow: auto; */
}

.footer {
  background-color: lightgreen;
  height: 170px;
}

方案2：固定视口高度，局部滚动 #

保留html, body的height: 100%，强制页面高度等于视口，content内容过多时仅自身滚动：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden; /* 避免body自身溢出 */
}

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  background-color: lightyellow;
  height: 170px;
}

.content {
  background-color: lightpink;
  flex-grow: 1;
  overflow: auto; /* 内容超出时局部滚动 */
}

.footer {
  background-color: lightgreen;
  height: 170px;
}

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