如何获取 CSS % 单位来表示高度而不是宽度

Question

我正在尝试使用 CSS 制作一个动画下拉/可扩展组件。我目前有一个扩展和折叠的类，实现如下：

.expanded {
  margin-top: 0;
}
.collapsed {
  margin-top: -100%;
}

但是，当我实际根据当前下拉状态分配这些类时，似乎

-100%

相当于我元素的

width

的 -100%，而不是我想要的高度。这意味着当我的元素高度大于宽度时，下拉菜单不会完全折叠。有什么方法可以更改

%

单位引用的维度吗？

如果没有，什么是更好的方法来动画容器的展开/折叠？

折叠元素的计算尺寸图像（带有

margin-top: -100%

）：

Answer 1

你的处理方式有点奇怪。我要么使用标准的最大高度方式。或者最好的方法，网格。

.dropdown {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out;
}

 .expanded {
    max-height: 500px; 
}

这种方法很简单，但有一个局限性；您需要知道或估计您的内容所需的最大高度。

要获得更动态、更整洁的解决方案，请使用 grid-template-rows

.container {
    display: grid;
    grid-template-rows: 0fr auto;
    transition: grid-template-rows 0.5s ease-out;    
}

.container.expanded {
    grid-template-rows: 1fr auto;
}