CSS - height
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.
Example
@viewport { height: 500px; }
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 syntax
<a href="css/@viewport/height#viewport-length"><viewport-length></a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>1,2<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a><p>where <br><code><viewport-length> = auto <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/@viewport/height#length-percentage"><length-percentage></a></code></p><p>where <br><code><length-percentage> = <a title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0" href="css/length"><length></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a></code></p>
Description
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.
Related at-rule | @viewport |
---|---|
Initial value | as each of the properties of the shorthand:
|
Percentages | as each of the properties of the shorthand:
|
Media | visual, continuous |
Computed value | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 29 (behind a flag) | No support | 10 -ms | 11.10 Removed in 15 Reintroduced behind a flag in 16 |
No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.4 | 29 | No support | 10-ms | 11.10 Removed in 15 Reintroduced behind a flag in 16 |
No support |
Specifications
Specification | Status | Comment |
---|---|---|
CSS Device Adaptation The definition of '"height" descriptor' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@viewport/height