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

 

CSS
@viewport {
  height: 500px;
}

Syntax  

CSS
/* 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

CSS
<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 valueas each of the properties of the shorthand:
Percentagesas each of the properties of the shorthand:
  • min-height: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.
  • max-height: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.
Mediavisual, continuous
Computed valueas each of the properties of the shorthand:
  • min-height: the percentage as specified or the absolute length
  • max-height: the percentage as specified or the absolute length or none
Canonical orderorder 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

@viewport CSS CSS Descriptor Reference