The height
CSS descriptor is a shorthand descriptor for setting both min-height
and max-height
of the viewport. By providing one viewport length value will set both, the minimum height and the maximum height, to the value provided.
If two viewport values are provided, the first value will set the minimum height and the second value will set the maximum height.
Syntax
/* One value */ height: auto; height: 320px; height: 15em; /* Two values */ height: 320px 200px;
Values
auto
- The used value is calculated from the other CSS descriptors' values.
<length>
- A non-negative absolute or relative length.
<percentage>
- A percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.
Formal definition
Related at-rule | @viewport |
---|---|
Initial value | as each of the properties of the shorthand:
|
Percentages | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Formal syntax
<viewport-length>{1,2}where
<viewport-length> = auto | <length-percentage>
where
<length-percentage> = <length> | <percentage>
Examples
Setting minimum and maximum height
@viewport { height: 500px; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Device Adaptation The definition of '"height" descriptor' in that specification. |
Working Draft | Initial definition |
Browser compatibility
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
height descriptor | Chrome No support 29 — 84 | Edge
Full support
12
| Firefox No support No | IE
Full support
10
| Opera
Full support
16
| Safari No support No | WebView Android No support 4.4 — 37 | Chrome Android No support 29 — 84 | Firefox Android No support No | Opera Android
Full support
16
| Safari iOS No support No | Samsung Internet Android Full support 2.0 |
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.