Screen: 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",
);

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

window.outerHeight = window.screen.availHeight;

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

在 Windows 系统上，其工作原理类似，通过打开窗口并调整其垂直尺寸，使其利用所有可用的垂直空间，为任务栏和任何其他预留空间的界面元素留出位置。

规范

浏览器兼容性

另见

• Window
• Screen
• Screen.availWidth
• Window.innerHeight