JavaScript Modal弹窗溢出问题修复 标签栏或弹窗容器独立滚动实现

原有代码的溢出问题来自两个错误配置：

1. 标签容器.tab和内容容器.tabcontent被写死了height:30px，远小于实际内容高度
2. 弹窗容器没有配置溢出裁剪规则，导致内容直接冲出容器

方案A：固定弹窗高度，仅标签区域滚动（符合需求A） #

直接替换原有CSS中对应部分的代码即可：

/* 原有#myModal样式新增overflow:hidden */
#myModal {
  position: absolute;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  height: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden; /* 新增：裁剪溢出容器的内容 */
}

/* 替换原有.tab样式 */
.tab {
  float: left;
  border-top: 2px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: calc(100% - 120px); /* 新增：减去顶部标题文字的高度，占满弹窗剩余空间 */
  overflow-y: auto; /* 新增：标签区域超出高度时显示滚动条 */
}

/* 替换原有.tabcontent样式 */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border-top: 1px solid #ccc;
  width: 70%;
  height: calc(100% - 120px); /* 新增：和标签区域高度一致 */
  overflow-y: auto; /* 可选：内容过多时内容区域也可滚动 */
  display: none;
}

把你之前移除的禁用页面滚动代码加回JS末尾即可，弹窗打开时页面不会滚动，仅标签区域可以滚动。

方案B：弹窗高度自适应内容，超出视口时弹窗内部滚动（符合需求B） #

替换对应CSS代码即可：

/* 原有#myModal样式修改height为max-height，新增overflow */
#myModal {
  position: absolute;
  background-color: #fefefe;
  margin: auto;
  padding: 16px;
  border: 1px solid #888;
  width: 80%;
  max-height: 90vh; /* 替换原height:70%：最大高度不超过视口的90% */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto; /* 新增：内容超出最大高度时弹窗内部显示滚动条 */
}

/* 替换原有.tab样式，删除固定height */
.tab {
  float: left;
  border-top: 2px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
}

/* 替换原有.tabcontent样式，删除固定height */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border-top: 1px solid #ccc;
  width: 70%;
  display: none;
}

该方案下弹窗会根据内容高度自动调整，只有当内容总高度超过视口90%时，才会在弹窗内部显示滚动条，页面本身不会滚动。

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