CSS height Property
Example
Set the height of two <div> elements:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The height property sets the height of an element.
The height of an element does not include padding, borders, or margins!
If height: auto; the element will automatically adjust its height to allow
its content to be displayed correctly.
If height is set to a numeric value (like pixels, (r)em, percentages) then if
the content does not fit within the specified height, it will overflow. How the
container will handle the overflowing content is defined by the
overflow property.
Note: The min-height and
max-height properties override the
height property.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS1 |
| JavaScript syntax: | object.style.height="500px" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS Syntax
height: auto|length|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| auto | The browser calculates the height. This is default | Demo ❯ |
| length | Defines the height in px, cm, etc. Read about length units | Demo ❯ |
| % | Defines the height in percent of the containing block | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Set the height of an element to 50% of the height of the parent element:
#parent {
height: 100px;
}
#child {
height: 50%;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Height and Width
CSS tutorial: CSS Box model
CSS reference: width property
HTML DOM reference: height property
