为何设置50vh/50vw的Div元素相互重叠？如何解决？

常见触发原因 #

• 块级元素默认流布局：div是块级元素，默认独占一行，四个设为50%高度的div会依次向下排列，总高度达到200%视口高度，超出视口的部分就会和上方元素重叠。
• 盒模型计算偏差：如果给div加了margin、padding或border，默认box-sizing: content-box会让元素实际宽高超出设定的50%，挤在一起造成重叠。
• 错误定位设置：如果给div加了position: absolute/fixed但没指定top/left等位置属性，元素会脱离文档流堆叠在一起。

针对性解决方法 #

1. 用CSS Grid实现2x2铺满布局（最推荐） #

如果你的目标是让四个div刚好填满整个视口，给父容器加Grid布局：

/* 父容器的CSS Modules样式 */
.parentContainer {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  gap: 0; /* 去除网格默认间距 */
}

/* 子div样式 */
.childBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 确保padding/border不占额外空间 */
}

React组件里把四个div嵌套进这个父容器就行。

2. 用Flex布局配合换行 #

给父容器设置flex并允许自动换行：

.parentContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.childBox {
  width: 50%;
  height: 50%;
  box-sizing: border-box;
}

3. 修正盒模型问题 #

如果是margin/padding导致元素超出设定尺寸，给子div设置box-sizing: border-box，让宽高计算包含padding和border：

.childBox {
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  /* 要是有margin，得调整父容器的gap或者把宽度改成减去margin后的数值 */
}

4. 修正绝对定位问题 #

如果用了绝对定位，给每个div明确指定位置：

.childBox1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
}
.childBox2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
}
.childBox3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
}
.childBox4 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
}

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