如何实现CSS下拉菜单的高度自动伸缩_结合CSS Grid的fr单位特性-css教程-PHP中文网

不能用 height: auto 做下拉菜单过渡动画，必须用 grid-template-rows + minmax(0, max-content) 实现平滑伸缩；因 auto 非数值，无法插值，而 grid 方案依赖确定高度上下文、display: grid 声明和 overflow: hidden 三前提。

如何实现css下拉菜单的高度自动伸缩_结合css grid的fr单位特性

不能用 height: auto 做下拉菜单过渡动画——浏览器根本不会动，只会跳变。 必须换用 grid-template-rows + fr 单位，配合严格前提条件，才能实现真正平滑、内容驱动的高度伸缩。

为什么 `height: 0` → `height: auto` 过渡必然失败

CSS transition 只能插值数值型属性。auto 不是数字，是运行时计算值，浏览器无法在“0px”和“未知像素数”之间生成中间帧。即使写了 transition: height 0.3s，也只会立刻渲染最终高度，毫无动画效果。

常见错误现象：

菜单点击后“啪”一下弹出，没有展开过程
加了 overflow: hidden 但内容仍从顶部溢出可见
动画只在收起时有效，展开时直接跳

用 `grid-template-rows: 0fr` → `minmax(0, max-content)` 替代

这是目前最可靠的内容自适应伸缩方案。关键不是 1fr，而是 minmax(0, max-content)：它允许轨道从 0 高度开始插值，并动态匹配实际内容所需高度，避免 1fr 在内容极少时撑空或极多时溢出。

必须满足的三个前提（缺一不可）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

父容器需有确定高度上下文：height、max-height、或嵌套在 flex: 1 / grid 的弹性区域中
显式声明 display: grid 和 grid-template-rows（哪怕初始是 0fr）
下拉内容区必须设 overflow: hidden，否则轨道为 0fr 时内容仍会显示

示例结构：

.dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
  overflow: hidden;
}
.dropdown.active {
  grid-template-rows: minmax(0, max-content);
}