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

问题描述 投票:0回答:1

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

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

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

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

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

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

margin-top: -100%
):

html css css-animations dropdown margin
1个回答
0
投票

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

.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;
}
© www.soinside.com 2019 - 2024. All rights reserved.