Javascript 计算所需的高度，使缩放的div到达底部视口

我使用CSS transform:scale（0.6）来缩小div。当元素被缩小时，它保持其纵横比。但是，在我的例子中，该元素需要始终具有到达视口底部的高度。这意味着我需要调整元素的高度，同时保持其宽度和顶部位置相同

如何计算需要应用的高度，以便在应用transform:scale（x）时元素正好到达视口底部

下面是一个代码片段。单击任意位置可向下缩放div，此时我应应用新高度，以允许div高度到达视口底部，同时保持相同的宽度和位置

document.body.addEventListener（'click'，（）=>{
document.querySelectorAll（'div'）[0].style.transform='scale（0.44）'；
});
正文{
保证金：0；
填充：0；
高度：100vh；
}
div{
宽度：350px；
高度：计算（100%-50px）；
位置：绝对位置；
顶部：50px；
背景色：红色；
位置：绝对位置；
变换原点：顶部；
}
TEST
既然你想让div的高度一直延伸到底部，你可以在这里使用
window.innerHeight

可以使用以下公式计算新高度：-

newHeight=（视口高度-偏移）*（1/scaleValue）

输入值后，可归结为以下计算：-

newHeight=（window.innerHeight-div.offsetTop）*（1/0.44）


document.body.addEventListener（'click'，（）=>{
const div=document.queryselectoral（'div'）[0]；
div.style.transform='比例（0.44）'；
div.style.height=`${（window.innerHeight-div.offsetTop）*（1/0.44）}px`
});
正文{
保证金：0；
填充：0；
高度：100vh；
}
div{
宽度：350px；
高度：计算（100%-50px）；
位置：绝对位置；
顶部：50px；
背景色：红色；
位置：绝对位置；
变换原点：顶部；
}

试验
我看到您从顶部定位它。我认为如果你从底部定位，你会得到你想要的

将顶部更改为底部：0px

将变换原点更改为变换原点：底部

对于计算高度u，可以使用100VH而不是100%