为何100%高度的Flex布局总高度超出100%？

问题根源是浏览器给body设置了默认边距（通常是8px），当你给html和body设height: 100%时，这个默认边距会让页面总高度变成100% + 上下边距，直接超出视口范围。

修复代码方案 #

只需要清除默认边距，并可以优化高度设置让布局更健壮：

html,
body {
  margin: 0; /* 清除浏览器默认边距 */
  padding: 0;
  min-height: 100vh; /* 用vh单位确保占满视口高度，内容溢出时自动延伸 */
}

#container {
  min-height: 100%;
  display: flex;
  flex-flow: column;
}

#main {
  flex: 1; /* 自动填充container的剩余空间 */
}

若坚持使用height:100%的替代写法 #

如果不需要内容溢出时的自动延伸效果，保留height:100%的话，只需清除默认边距即可：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
  display: flex;
  flex-flow: column;
}

#main {
  flex: 1;
}

关键逻辑说明 #

• 清除默认边距是解决高度溢出的核心，避免额外空间叠加在100%高度上
• flex:1会让#main自动占据#container中除两个footer外的所有剩余空间，实现拉伸效果
• min-height:100vh比height:100%更灵活，当主内容过多时，页面可以正常滚动，不会截断内容

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