计算所需的高度以使按比例缩小的div到达底部视口

Question

我正在使用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

Answer 1

因为您希望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;
}

html prettyprint-override"><div>
  <h1>TEST</h1>
</div>