如何防止切换toggle下拉问答列表时容器尺寸增大、底部出现空白

问题根源 #

你当前用display: none和display: block切换答案显隐的逻辑里，display: none的元素会完全脱离文档流，不占据任何高度；切换为display: block后元素回归文档流，会额外占据自身内容对应的高度，自然会把父级dropdowns容器的高度撑大。你提前加的15em底部内边距是固定值，无法抵消答案内容本身占据的高度，所以容器总高度会随展开操作变大，底部会出现超出预期的空白。

解决方案 #

这里提供两种适配不同需求的解决方式： #

方案1：固定父容器高度，内容溢出滚动 #

如果你希望dropdowns容器的高度完全固定，不会随答案展开收起变化，可以直接给容器设置固定高度+溢出滚动规则：

.dropdowns {
  border-radius: 1em;
  max-width: 40rem;
  background-color: white;
  padding: 4em 2em; /* 去掉原来的15em底部padding，换成你需要的固定值 */
  margin-bottom: 5em;
  height: 600px; /* 按设计要求设置固定高度，也可以用vh单位适配移动端 */
  overflow-y: auto; /* 内容超出高度时内部滚动，不会撑大容器 */
}

方案2：改用高度过渡实现显隐，容器高度自适应且无多余空白 #

如果不需要固定容器高度，只是不想要多余的底部留白，同时还能加平滑展开动画，可以把display切换改成max-height+overflow: hidden的方案，完全规避文档流高度变化的异常问题：

1. 修改CSS规则：

.dropdown-content {
  max-height: 0; /* 收起时高度为0 */
  overflow: hidden; /* 超出高度的内容隐藏 */
  transition: max-height 0.3s ease; /* 加过渡动画更流畅 */
  margin: 0; /* 清除p标签默认的外边距，避免高度计算异常 */
}

.dropdown-display {
  max-height: 200px; /* 只要设置成比你的答案最大高度大的值即可 */
}

2. 修正JS选择器逻辑：你当前的JS只选中了第一个.question和第一个.dropdown-content，点击第二个问题不会触发切换，修改成批量绑定即可：

let questions = document.querySelectorAll(".question")
questions.forEach(question => {
  question.addEventListener("click", toggling)
})

function toggling(e){
  // 找到当前点击问题对应的答案元素
  const answer = e.currentTarget.nextElementSibling
  answer.classList.toggle("dropdown-display")
}

额外优化建议 #

你原来的dropdowns规则里设置的padding-bottom:15em是底部留白的核心原因之一，如果不需要这么大的底部预留空间，可以直接调小这个值，适配你实际的内容高度即可。

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