javascript根据窗口高度设置左侧绝对位置

Question

我想根据 window.innerHeight 移动一个绝对位置 div。例如，如果 win height 为 700px，则 div 的样式为 left:100px，那么如果高度为 600px 样式将为 left: 78px。

请告诉我如何计算它。我正在尝试使用 regression linear 公式，但老实说我很困惑。

PS:我不想使用CSS 媒体查询，它确实需要根据窗口高度进行响应。

Answer 1

您可以使用 vh 单位代替像素，或者使用 calc 函数。

查看此示例及其工作原理:

html, body {
height: 100%;
}

.myHeight {
width: 100px;
height: calc(100% - 20%);
position:relative;
display: inline-block;
background-color:cyan;
color: #000;
}
.myVhHeight {
width: 100px;
height: 40vh;
position:relative;
display: inline-block;
background-color: green;
color: #fff;
}

<div class="myHeight">
this uses 80% of total height with 'calc'
</div>
<div class="myVhHeight">
this uses 40% of view port  height with 'vh'
</div>