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