简介
在前端开发过程中，有时候需要获取视口高度的值，而height: 100vh往往不是我们需要的值。这个时候，$@sparing-software/100vh$ 就派上了用场。该 npm 包提供了一种将height: 100vh的值设置为与视口高度一致的方法。本文将会介绍如何使用这个包，并提供相应的代码示例。
安装
该包可通过 npm 进行安装并使用。在命令行中输入以下命令即可进行安装：
npm install @sparing-software/100vh
使用
要使用该包，先要调用它：
const 100vh = require('@sparing-software/100vh')该方法可以导入该包并将其用于样式表中。
下面是一个基本的示例：
const root = document.documentElement;
root.style.cssText = `
--viewportHeight: ${100vh()};
`;当调用方法 100vh(); 时会返回一个值，该值是视口高度。可以通过以下方法来使用值：
height: calc(var(--viewportHeight) * 1px);
在使用时，视口大小改变时，此高度值也会相应调整。
示例代码
-- -------------------- ---- ------- ----- ----- - ---------------------------------- ----- ---- - ------------------------- ------------------ - - ----------------- ----------- -- ----- --------- - ------------------------------ ----------------------- - - ------- -------------------------- - ----- ----------------- -------- -- -------------------------------------
上面这段代码创建了一个高度等于视口高度的容器，背景颜色为 $F0F0F0$。
结语
通过以上介绍，我们可得知该包是一个非常实用的工具，能够为前端开发人员节省很多时间和精力。同时一个更好的实践是通过使用 CSS 方法来设置与视口高度一致的值，这样可以避免额外的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583cb7