Window.innerHeight

  • Revision slug: DOM/window.innerHeight
  • Revision title: window.innerHeight
  • Revision id: 62967
  • Created:
  • Creator: pjotrb123
  • Is current revision? No
  • Comment 17 words added; page display name changed to 'window.innerHeight'

Revision Content

{{ DomRef() }}

Summary

Height of the browser window viewport including, if rendered, the horizontal scrollbar.

Syntax

var intViewportHeight = window.innerHeight;

Value

intViewportHeight stores the window.innerHeight property value.

The window.innerHeight property is read-only; it has no default value. window.innerHeight property stores an integer representing a number of pixels.

Notes

The innerHeight property will be supported in any window object like a window, a frame, a frameset or a secondary window.

Example

Assuming a frameset
---------------------

var intFrameHeight = window.innerHeight; // or
var intFrameHeight = self.innerHeight; /* will return the height of the 
frame viewport within the frameset */
var intFramesetHeight = parent.innerHeight; /* will return the height of 
the viewport of the closest frameset */
var intOuterFramesetHeight = top.innerHeight; /* will return the height 
of the viewport of the outermost frameset */

xxx To do: link to an interactive demo here xxx

See also window.innerWidth, window.outerHeight and window.outerWidth.

To change the size of a window, see window.resizeBy and window.resizeTo.

Graphical example

innerHeight vs outerHeight illustration

Standards information

DOM Level 0. Not part of any W3C technical specification or recommendation.

 

{{ languages( { "fr": "fr/DOM/window.innerHeight", "ja": "ja/DOM/window.innerHeight" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Height of the browser window viewport including, if rendered, the horizontal scrollbar.</p>
<h3 name="Syntax">Syntax</h3>
<p>var <var>intViewportHeight</var> = window.innerHeight;</p>
<h3 name="Value">Value</h3>
<p><var>intViewportHeight</var> stores the window.innerHeight property value.</p>
<p>The window.innerHeight property is read-only; it has no default value. window.innerHeight property stores an integer representing a number of pixels.</p>
<h3 name="Notes">Notes</h3>
<p>The innerHeight property will be supported in any window object like a window, a frame, a frameset or a secondary window.</p>
<h4 name="Example">Example</h4>
<p><span class="remark">Assuming a frameset</span><br>
<span class="remark">---------------------</span></p>
<pre>var intFrameHeight = window.innerHeight; // or
var intFrameHeight = self.innerHeight; /* will return the height of the 
frame viewport within the frameset */
var intFramesetHeight = parent.innerHeight; /* will return the height of 
the viewport of the closest frameset */
var intOuterFramesetHeight = top.innerHeight; /* will return the height 
of the viewport of the outermost frameset */
</pre>
<p>xxx To do: link to an interactive demo here xxx</p>
<p>See also <a href="/en/DOM/window.innerWidth" title="en/DOM/window.innerWidth">window.innerWidth</a>, <a href="/en/DOM/window.outerHeight" title="en/DOM/window.outerHeight">window.outerHeight</a> and <a href="/en/DOM/window.outerWidth" title="en/DOM/window.outerWidth">window.outerWidth</a>.</p>
<p>To change the size of a window, see <a href="/en/DOM/window.resizeBy" title="en/DOM/window.resizeBy">window.resizeBy</a> and <a class="internal" href="/en/DOM/window.resizeTo" title="en/DOM/window.resizeTo">window.resizeTo</a>.</p>
<h3 name="Graphical_example">Graphical example</h3>
<p style="margin-left: -32px;"><img alt="innerHeight vs outerHeight illustration" class="internal" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
<h3 name="Standards_information">Standards information</h3>
<p>DOM Level 0. Not part of any <abbr title="World Wide Web Consortium">W3C</abbr> technical specification or recommendation.</p>
<p> </p>

<p>{{ languages( { "fr": "fr/DOM/window.innerHeight", "ja": "ja/DOM/window.innerHeight" } ) }}</p>
Revert to this revision