我正在使用CSS transform：scale（0.6）缩放div。当元素缩放时，它保持其纵横比。但是，在我的例子中，这个元素需要始终具有一个将到达视区底部的高度。这意味着我需要调整元素的高度，同时保持其宽度和顶部位置相同。
如何计算需要应用的高度，以便在应用transform：scale(x)时元素准确地到达视口底部？
下面是一个codesnippet。点击任意位置可以向下缩放div,这时我应该应用新的高度,允许div高度到达视区底部,同时保持相同的宽度和位置。
null
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>null
因为您希望div的高度一直延伸到底部，所以您可以在这里使用window.innerheight。
新高度可使用以下公式计算：-
newheight=（viewporteight-offsetTop)*(1/scaleValue)
输入数值后，它将归结为以下计算：-
newheight=(window.innerheight-div.offsettop)*(1/0.44)
null
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>