如何用jQuery计算window.innerHeight减去vh单位值？代码未正常运行求助

嘿，我来帮你拆解下这个问题～

核心问题：单位不兼容 #

你原代码里的问题出在单位类型不匹配：$(window).innerHeight()返回的是纯数字的像素值（比如800，代表800px），而10vh是字符串形式的视口单位。直接把这俩做减法时，JavaScript会把'10vh'当成无效数字处理，最终得到NaN，自然没法给元素设置正确的高度。

修正方案：统一转成像素计算 #

咱们需要先把10vh转换成对应的像素值，再做减法。因为1vh等于视口高度的1%，所以10vh就是视口高度的10%，用代码实现如下：

$(window).on('load', function(){
  // 获取视口高度（纯数字像素值）
  const viewportHeight = $(window).innerHeight();
  // 计算10vh对应的像素数
  const tenVhPixels = viewportHeight * 0.1;
  // 设置高度，记得加上px单位
  $('#login').css('height', viewportHeight - tenVhPixels + 'px');
});

如果想更简洁，也可以直接计算90%的视口高度：

$(window).on('load', function(){
  $('#login').css('height', $(window).innerHeight() * 0.9 + 'px');
});

额外小提示：弃用方法的替代 #

另外要注意，$(window).load()在jQuery 3.0之后已经被弃用了，推荐用$(window).on('load', function(){...})，这样兼容性更好。如果你的场景不需要等待图片等所有资源加载完成，用$(document).ready()会更高效。

更简单的CSS替代方案 #

其实如果只是想实现“元素高度为视口高度减10vh”，纯CSS就能搞定，根本不需要JavaScript：

#login {
  height: calc(100vh - 10vh);
  /* 或者直接简写为 height: 90vh; */
}

内容的提问来源于stack exchange，提问作者CoderChris