如何让CSS百分比单位参照高度而非宽度实现下拉组件收起

关于百分比参照维度的问题 #

CSS规范明确规定：margin/padding的百分比值始终以包含块的宽度为基准，无论垂直方向（margin-top/margin-bottom）还是水平方向，这个规则无法修改，所以你无法让margin-top: -100%参照元素高度计算。

更优的展开收起动画方案 #

1. 基于transform: translateY的方案（视觉收起，保留文档流） #

利用translateY()的百分比参照元素自身高度的特性，实现精准垂直位移：

.collapsible {
  transition: transform 0.3s ease;
  transform-origin: top; /* 确保动画从顶部触发 */
}
.collapsed {
  transform: translateY(-100%); /* 向上移动自身高度的100% */
}
.expanded {
  transform: translateY(0);
}

• 特点：动画精准，但元素收起后仍占据原文档流空间，适合不需要释放空间的场景。

2. max-height + overflow方案（自适应高度，释放文档流） #

这是最常用的自适应高度收起方案，通过过渡max-height实现动画：

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.expanded {
  max-height: 1000px; /* 设置一个大于内容最大高度的值 */
}
.collapsed {
  max-height: 0;
}

• 特点：元素收起后不占据文档流空间，适配内容高度；若max-height设置过大，动画后期速度会偏快，可通过JS计算实际内容高度动态赋值优化。

3. height: auto过渡（现代浏览器原生支持） #

Chrome 113+、Firefox 110+、Edge 113+已支持height: auto的原生过渡，无需借助max-height：

.collapsible {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.expanded {
  height: auto;
}
.collapsed {
  height: 0;
}

• 特点：动画自然精准，代码简洁，但需考虑浏览器兼容性。

4. CSS Grid方案（自适应高度，兼容性好） #

利用Grid布局的grid-template-rows过渡实现：

.collapsible-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.collapsible-container.expanded {
  grid-template-rows: 1fr;
}
.collapsible-content {
  overflow: hidden;
}

• 特点：自适应内容高度，收起后释放空间，兼容性优于height: auto方案。

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