使用Flexbox时6个div占满剩余高度及顶部白边问题求助

嘿，我来帮你搞定这两个Flexbox的问题！咱们一个个拆解解决：

1. 解决页面顶部的白色边距 #

这个问题其实是CSS的外边距折叠在搞鬼：你的<h2>标签自带默认的上下外边距（margin），即使给html、body和#all都设了margin:0，这个h2的margin还是会“穿透”父元素，导致顶部出现白边。

解决方法超简单，直接给h2去掉默认margin就行，要是需要标题上下有间距，用padding代替margin就不会触发折叠了：

h2 {
  text-align: center;
  margin: 0; /* 核心：干掉默认外边距 */
  padding: 1rem 0; /* 用padding保留标题的上下留白 */
}

2. 让6个div恰好占据页面剩余高度 #

你现在给#all设了height:100%，但里面同时有h2和6个div，直接硬设div高度肯定不好控制。正确的思路是把#all改成垂直方向的Flex容器，让h2占自己的高度，剩下的空间全部分给6个div：

方案一：给6个div加外层容器（更清晰） #

如果你的结构是#all > h2 > .box-container > 6个div，可以这么写：

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

h2 {
  text-align: center;
  margin: 0;
  padding: 1rem 0;
}

#all {
  background-color: red;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex; /* 把#all变成flex容器 */
  flex-direction: column; /* 子元素垂直排列 */
}

.box-container {
  flex: 1; /* 这个容器会占据#all里除h2之外的所有剩余高度 */
  display: flex;
  flex-direction: column; /* 让里面的6个div垂直排列 */
}

.box-container div {
  flex: 1; /* 每个div平分.box-container的高度 */
  border: 1px solid white; /* 加个边框方便看效果 */
  box-sizing: border-box; /* 边框不会额外占用高度，避免溢出 */
}

方案二：直接给6个div设置样式（如果没有外层容器） #

如果你的结构是#all > h2 + 6个div，可以直接给每个div加flex:1：

#all {
  /* 其他样式不变 */
  display: flex;
  flex-direction: column;
}

#all div {
  flex: 1; /* 每个div自动平分h2剩下的高度 */
  box-sizing: border-box;
  border: 1px solid white;
}

这样调整后，6个div就会刚好填满h2下方的所有剩余空间，既不会超出页面，也不会留空白~

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