在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

只读 Screen 接口的 availHeight property returns the height, in CSS pixels, of the space available for Web content on the screen. Since Screen is exposed on the Window 接口的 window.screen property, you access availHeight 使用 window.screen.availHeight .

You can similarly use Screen.availWidth to get the number of pixels which are horizontally available to the browser for its use.

句法

let availHeight = window.screen.availHeight;
					

值

A numeric value indicating the number of CSS pixels tall the screen's available space is. This can be no larger than the value of window.screen.height , and will be less if the device or user agent reserves any vertical space for itself.

For instance, on a Mac whose Dock is located at the bottom of screen (which is the default), the value of availHeight is approximately the value of height (the total height of the screen in CSS pixels) minus the heights of the Dock and menu bar, as seen in the diagram below.

范例

If your web application needs to open a new window, such as a tool palette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.

In the main window, when it's time to open the panels, code like the following is used.

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

The Panels window's HTML, in panels.html , has JavaScript code of its own, which is executed as soon as the window is created. It doesn't even need to wait for any particular event (or any event at all). That code handles resizing the window based on the available space:

window.outerHeight = window.screen.availHeight;
					

The result is something similar to the below. Note the Panels window filling all available vertical space at the left of the screen.

On a Windows system, this would function similarly, by opening the window and sizing it vertically so it uses all available vertical space, leaving room for the taskbar and any other interface elements that reserve space.

规范

规范	状态	注释
CSSOM (CSS 对象模型) 视图模块 The definition of 'Screen.availHeight' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
availHeight	Chrome 40	Edge 12 12 Always reflects the main screen.	Firefox Yes	IE ?	Opera Yes	Safari 6	WebView Android 40	Chrome Android 40	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 4.0

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

见实现注意事项。

另请参阅

• Window
• Screen
• Screen.availWidth
• Window.height

元数据

• 最后修改： Jul 25, 2020

相关话题

1. CSS Object Model
2. Screen
3. 特性

   1. availHeight
   2. availLeft
   3. availTop
   4. availWidth
   5. colorDepth
   6. height
   7. left
   8. mozBrightness
   9. mozEnabled
   10. onorientationchange
   11. orientation
   12. pixelDepth
   13. top
   14. width
4. 方法

   1. lockOrientation()
   2. unlockOrientation()
5. 继承：

   1. EventTarget
6. Related pages for CSSOM

   1. AnimationEvent
   2. CSS
   3. CSSConditionRule
   4. CSSGroupingRule
   5. CSSKeyframeRule
   6. CSSKeyframesRule
   7. CSSMediaRule
   8. CSSNamespaceRule
   9. CSSPageRule
   10. CSSRule
   11. CSSRuleList
   12. CSSStyleDeclaration
   13. CSSStyleRule
   14. CSSStyleSheet
   15. CSSSupportsRule
   16. CaretPosition
   17. LinkStyle
   18. MediaQueryList
   19. MediaQueryListListener
   20. StyleSheet
   21. StyleSheetList
   22. TransitionEvent