CSS样式导致<details>标签内容无法挤压后续元素问题求助

嘿，这个问题我太熟了！你遇到的核心问题是给<details>标签设置了固定的height: 35px——当手风琴展开时，这个固定高度会把容器死死限制住，内部的内容虽然能显示，但容器本身不会随着内容扩展高度，所以下面的元素自然不会被挤下去。

修复方案 #

只需要把<details>的height属性改成min-height，这样默认状态下容器保持35px的高度，展开时又能自动适应内容的高度：

details {
  width: 500px;
  /* 把固定height改成min-height，让容器可自适应高度 */
  min-height: 35px;
  background-color: #303030;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}
details > summary {
  color: white;
  position: relative;
  /* 加padding让文字垂直居中，优化视觉效果 */
  padding: 8px 0;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::after {
  content: "+";
  position: absolute;
  right: 20px;
}
details[open] > summary::after {
  content: "-";
  position: absolute;
  right: 20px;
}
details > p {
  padding: 5px;
  background-color: #303030;
  color: white;
  /* 加margin-top让内容和标题分隔开，更美观 */
  margin-top: 5px;
}

为什么这样改？ #

• min-height: 35px会确保容器在折叠状态下至少保持35px的高度，同时允许它在展开时根据内部内容的高度自动拉伸，这样就能正常挤压下方元素了。
• 额外给summary加了padding、给p加了margin-top，是为了优化视觉体验，让手风琴的交互感更自然。

现在再测试一下，手风琴展开时下面的元素就会自动下移啦！

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