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