height

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value auto
Inherited No
Applied To all elements except built-in elements, columns and table groups.
HTML analog <table height="" > <img height="">
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-height

Description
This parameter determines height of block or replaced elements (for example, tag ). The height does not include a thickness of borders round an element, value of spaces and fields.
Browsers differently react to options of element height. If its contents exceed the specified height, Internet Explorer and Opera will ignore value of parameter height and will automatically arrange height under content. Browser Netscape (and also Mozilla and Firefox) will leave height of an element invariable, and contents will be displayed over it. Because of this feature it can be superposition of elements. When elements are in HTML, they go in order. That it has not occurred, it is possible to add property overflow: auto to style of an element.

Syntax

height: destination | percent | auto

Arguments
As values it is used any length units accepted in CSS — for example, pixels (px), inches (in) are accepted, points (pt), etc. At use of percentage record the element height is calculated depending on height of a parental element. If the parent obviously is not specified, the browser window acts it. The argument auto determines height proceeding from a contained element.

Example

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>height</title>
  <style type="text/css">
   .layer {
    height: 50px; /* Block height */
    width: 150px; /* Block width */
    overflow: scroll; /* Add scrolling bands */
    background: #fc0; /* Background color */
    padding: 7px; /* Areas around the text */
    border: 1px solid #333; /* Frame parameters */
   }
  </style>
 </head> 
 <body> 
 
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div> 
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.height