上下div设50%高度时底部div超出窗口的问题排查与解决

开发者阿泽

2026-7-5

解决上下分屏均匀布局且保持padding一致的问题

你遇到的问题根源是CSS默认的标准盒模型：height属性仅计算元素的内容高度，padding和margin会额外占据空间。两个子元素各设50%高度，再加上各自的margin和padding，总高度就会超过父容器的100%，导致底部元素溢出窗口。

下面提供两种可靠的解决方案：

方法一：使用Flexbox布局（推荐）

Flexbox可以自动处理空间分配，无需手动计算高度，适配窗口变化更稳定：

修改后的CSS代码：

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

#main {
  background-color: lightblue;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px; /* 子元素之间的间距 */
}

#top {
  padding: 20px;
  background-color: pink;
  flex: 1;
  box-sizing: border-box; /* padding包含在高度内 */
}

#lower {
  padding: 20px;
  background-color: gray;
  flex: 1;
  box-sizing: border-box;
}

核心逻辑：

父容器启用垂直Flex布局，子元素自动垂直排列
flex: 1让两个子元素均分父容器的可用空间，窗口大小变化时自动适配
box-sizing: border-box确保padding不会额外增加元素尺寸
父容器的padding和gap替代子元素的margin，避免额外空间溢出

方法二：使用box-sizing + 计算高度

如果偏好传统布局方式，可以通过计算高度解决：

修改后的CSS代码：

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

#main {
  background-color: lightblue;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

#top {
  padding: 20px;
  margin-bottom: 20px;
  background-color: pink;
  height: calc(50% - 10px); /* 减去一半的间距占用 */
  box-sizing: border-box;
}

#lower {
  padding: 20px;
  background-color: gray;
  height: calc(50% - 10px);
  box-sizing: border-box;
}