弹窗表单底部无法完全显示白色背景的CSS问题排查求助

问题根源 #

你设置的父容器与子表单的高度规则冲突，导致内容溢出裁切：

1. 弹窗外层容器.formPopup设置了max-height: 340px，但内部表单.formContainer的max-height设为350px，子容器高度上限高于父容器
2. 两个容器都没有配置溢出处理规则，内容超出父容器高度的部分会被直接裁切，底部按钮区域刚好落在裁切范围外，对应的白色背景就无法显示

修复方案 #

1. 调整CSS高度与定位规则 #

修改对应CSS片段即可解决背景显示问题，同时优化弹窗居中逻辑避免偏移：

.formPopup {
  display: none;
  /* 移除不合理的父容器高度限制，让高度由内部内容撑开 */
  max-height: unset;
  position: absolute;
  /* 修正水平居中参数，避免偏移 */
  left: 50%;
  top: 10%;
  transform: translate(-50%, 0);
  border: 3px solid #999999;
  z-index: 9;
  opacity: 1.0;
}
.formContainer {
  max-width: 1600px;
  max-height: 350px;
  padding: 20px;
  background-color: white;
  /* 内容超出高度时自动显示纵向滚动条，不会裁切背景 */
  overflow-y: auto;
}

如果不需要限制弹窗最大高度，直接删掉.formContainer的max-height和overflow-y配置即可，背景会自动适配内容高度。

2. 额外功能修复（可选） #

你当前的JS代码存在ID不匹配的问题，会导致取值异常：JS中调用的document.getElementById('columnorder')、document.getElementById('columnnumberingorder')，对应的HTML元素ID为order、columnnumbering，修改HTML中select元素的ID即可：

<select id="columnorder" name="columnorder">
  <option value="top_to_bottom" selected>从上到下</option>
  <option value="bottom_to_top"  >从下到上</option>   
</select>

<select id="columnnumberingorder" name="columnnumberorder">
  <option value="left_to_right" selected>从左到右</option>
  <option value="right_to_left"  >从右到左</option>   
</select>

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