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

【问题标题】：Calculate required height to make scaled down div reach the bottom viewport计算所需的高度以使缩小的 div 到达底部视口
【发布时间】：2021-04-19 14:11:20
【问题描述】：

我正在使用 CSS transform: scale(0.6) 来缩小 div。当元素按比例缩小时，它会保持其纵横比。然而，在我的例子中，这个元素需要总是有一个可以到达视口底部的高度。这意味着我需要调整元素的高度，同时保持其宽度和顶部位置相同。

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

下面是coden-p。单击任意位置会缩小 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;
}

&lt;div&gt;&lt;h1&gt;TEST&lt;/h1&gt;&lt;/div&gt;

【问题讨论】：

标签： javascript html css transform

【解决方案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>

【讨论】：

【解决方案2】：

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

从上到下改变：0px

将 transform-origin 更改为 transform-origin:bottom

为了计算高度，你可以使用 100VH 而不是 100%

【讨论】：