1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: Window.innerHeight
slug: Web/API/Window/innerHeight
translation_of: Web/API/Window/innerHeight
---
<div>{{APIRef}}</div>
<p>Altura (em pixels) da janela de visualização do navegador, incluindo, se renderizado, a barra de rolagem horizontal.</p>
<div class="note"><strong>Note:</strong> If you use {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}} to set the virtual window size for page layout purposes, the value returned by this property corresponds to the viewport height set using that method.</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">var <var>intViewportHeight</var> = window.innerHeight;</pre>
<h3 id="Value">Value</h3>
<p>On return, <code>intViewportHeight</code> is the height of the browser window's viewport.</p>
<p>The <code>window.innerHeight</code> property is read only; it has no default value.</p>
<h2 id="Notes">Notes</h2>
<p>The <code>innerHeight</code> property is supported in any window object like a {{domxref("window")}}, a frame, a frameset, or a secondary window.</p>
<p>There is <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">an algorithm</a> to obtain the height of the viewport excluding, if rendered, the horizontal scrollbar.</p>
<h2 id="Example">Example</h2>
<h3 id="Assuming_a_frameset">Assuming a frameset</h3>
<pre class="brush:js">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>{{todo("link to an interactive demo here")}}</p>
<p>To change the size of a window, see {{domxref("window.resizeBy()")}} and {{domxref("window.resizeTo()")}}.</p>
<p>To get the outer height of a window, i.e. the height of the whole browser window, see {{domxref("window.outerHeight")}}.</p>
<h3 id="Graphical_example">Graphical example</h3>
<p>The following figure shows the difference between <code>outerHeight</code> and <code>innerHeight</code>.</p>
<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
<h2 id="Specification">Specification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td>
<td>9</td>
<td>9</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>1</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td>
<td>9</td>
<td>9</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<p>[1] From Firefox 4 to 24 this property was buggy and could give a wrong value before page load on certain circumstances, see {{bug(641188)}}.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("window.innerWidth")}}</li>
<li>{{domxref("window.outerHeight")}}</li>
<li>{{domxref("window.outerWidth")}}</li>
</ul>
|
