屏幕：availHeight 属性

一个数值，指示屏幕可用空间的高度（以 CSS 像素为单位）。该值不会超过 window.screen.height 的值，如果设备或用户代理为自身保留任何垂直空间，则该值会更小。

例如，在 Mac 上，如果 Dock 位于屏幕底部（默认设置），则 availHeight 的值大约等于 height 的值（屏幕总高度，以 CSS 像素为单位）减去 Dock 和菜单栏的高度，如下图所示。它们只会占用 availHeight，如果它们始终显示：如果页面处于全屏状态，或者如果 Dock 被配置为自动隐藏和显示，那么它们将不会计入 availHeight 中。

如果您的 Web 应用程序需要打开一个新窗口，例如一个工具面板，该面板可以包含多个面板，并且希望将其定位为占用所有可用的垂直空间，您可以使用类似于以下代码的方式实现。

在主窗口中，当需要打开面板时，可以使用以下代码。

const paletteWindow = window.open(
  "panels.html",
  "Panels",
  "left=0, top=0, width=200",
);

面板窗口的 HTML（在 panels.html 中）有自己的 JavaScript 代码，该代码在窗口创建后立即执行。它甚至不需要等待任何特定事件（或任何事件）。该代码处理根据可用空间调整窗口大小

window.outerHeight = window.screen.availHeight;

结果类似于下面所示。请注意，面板窗口填充了屏幕左侧的所有可用垂直空间。

在 Windows 系统上，它的工作原理类似，通过打开窗口并将其垂直调整大小，以使用所有可用的垂直空间，为任务栏和任何其他保留空间的界面元素留出空间。

• 窗口
• 屏幕
• Screen.availWidth
• Window.innerHeight