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

Question

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

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

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

document.body.addEventListener('click', () => {
document.querySelectorAll('div')[0].style.transform = 'scale(0.44)';
});

body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
width: 350px;
height: calc(100% - 50px);
position: absolute;
top: 50px;
background-color: red;
position: absolute;
transform-origin: top;
}

<div><h1>TEST</h1></div>

Answer 1

由于您希望div的高度一直延伸到底部，因此可以在此处使用window.innerHeight。

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

newHeight = (viewportHeight - offsetTop)*(1/scaleValue)

输入值将归结为以下计算：-

newHeight = (window.innerHeight - div.offsetTop)*(1/0.44)

document.body.addEventListener('click', () => {
const div = document.querySelectorAll('div')[0];
div.style.transform = 'scale(0.44)';
div.style.height = `${(window.innerHeight-div.offsetTop)*(1/0.44)}px`
});

body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
width: 350px;
height: calc(100% - 50px);
position: absolute;
top: 50px;
background-color: red;
position: absolute;
transform-origin: top;
}

<div>
<h1>TEST</h1>
</div>

Answer 2

我看到你从顶部定位了它。我认为，如果你把它放在最底层，你就会得到你想要的。

从上到下更改：0px

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

并且为了计算高度u可以使用100VH而不是100%