Question

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

请让我知道如何计算它。我正在尝试使用regression linear公式，但说实话，我很困惑。

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

Answer 1

您可以使用div单位而非像素，或使用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;
}

Answer 2

我知道你要求的是JS解决方案但是...... 您是否尝试通过定义？

来使用响应/条件样式类

@media screen( height: 700px ){ /* min-height, max-height, etc */
  div{
    left: 100px;
  }
}
@media screen( height: 600px ){ /* min-height, max-height, etc */
  div{
    left: 78px;
  }
}

在JS中你可以使用：

var divs = document.querySelector('div');
var left = (window.innerHeight == 700) ? 100 : 78 ;
for(var div in divs){
   div.style.left = left + 'px';
}

您也可以使用数学：

var refLeft = 100, refHeight = 700;
var newHeight = window.innerHeight();
var left = newHeight * refLeft / refHeight;

然后：

var divs = document.querySelector('div');
for(var div in divs){
   div.style.left = left + 'px';
}

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

2 个答案: