html - 100％高度的CSS

编辑：回答。transform: scaleY()对我来说效果不错。对不起，麻烦了！
我正在为用JavaScript触发的CSS动画创建一些代码。这个动画将应用于div元素，我想知道一种方法，我可以输入一个表示div的完整高度的值（div的高度会有所不同）。当to值设置为height: 100px时，我可以很好地触发它，但这不是我想要的。

@keyframes slideIn {
    from {height: 0;}
    to {height: 100%;}
}

有什么方法可以表示CSS中元素的全高吗？

最佳答案

post div的高度不是固定的，而是动态的。100%使div填充其父级的总高度。真正的意思是将div从0高度设置为auto高度，这在目前是不可设置动画的。对于纯CSS解决方案，您可以尝试其他方法，如max-height或scaleY()。或者可以使用JavaScript运行计算。
最大高度

@keyframes slideIn {
    from {max-height: 0px;}
    to {max-height: 1000px;}
}

缺点
转换时间不一致
限制框高度
垂直比例尺

@keyframes slideIn {
    from {transform: scaleY(0);}
    to {transform: scaleY(1);}
}

缺点
不“滑动”div周围的空间
可能覆盖其他变换效果

关于html - 100％高度的CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35525157/