在前端开发中，我们通常会使用 $(window).height() 来获取浏览器窗口的高度。但是，这个方法实际上返回的是整个窗口的高度，包括了滚动条和工具栏等部分，这可能会导致一些问题。
例如，当我们想要创建一个全屏背景的网页时，如果使用 $(window).height() 来设置元素的高度，那么这个元素实际上会超出浏览器窗口的可见区域，因为它还包括了滚动条和工具栏等部分的高度。
所以，我们可以使用可见窗口高度（Viewport Height）来解决这个问题。可见窗口高度指的是浏览器窗口的高度减去非可见部分的高度，只包括了可见的部分。在 CSS 中，我们可以使用 vh 单位来表示可见窗口高度。
那么，在 JavaScript 中，我们如何获取可见窗口高度呢？下面是一个示例代码：
function getViewportHeight() {
const windowHeight = window.innerHeight;
const docElement = document.documentElement;
// 如果浏览器不支持 innerHeight，则使用 documentElement.clientHeight
return windowHeight || docElement.clientHeight;
}这段代码首先检查浏览器是否支持 innerHeight 属性，如果支持，则返回 innerHeight 的值；如果不支持，则返回 documentElement.clientHeight 的值。
使用这个函数获取可见窗口高度后，我们可以将它应用到实际的案例中。例如，下面是一个使用可见窗口高度来创建全屏背景的示例：
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
------- --
-------- --
-
-------------- -
------- ------
----------------- --------------
---------------- ------
-------------------- -------
------------------ ----------
-
--------
-------
------
---- ----------------------------
-------
-------这个示例中，我们在 CSS 中使用了 100vh 来设置全屏背景元素的高度，这样就可以保证它只占据可见窗口的高度，而不会超出浏览器窗口的范围。
总之，使用可见窗口高度代替 $(window).height() 可以避免一些布局问题，并且能够更准确地表示浏览器窗口的可见部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25945