height

Jump to: navigation, search

height

This article is In Progress.



Summary

The media feature describes the height of the output device's rendering surface, such as the viewport height or the height of the page box.


Syntax

  • height: <length>
  • min-height: <length>
  • max-height: <length>

Values

<length>

Value for the height of the device's viewport must be a length value and can not be negative.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
21
Yes
?
Unknown
9.0
Yes
9
Yes
4
Yes
grid
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown
resolution
29
Yes
?
Unknown
?
Unknown
?
Unknown
?
Unknown
scan
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
?
Yes
?
Unknown
?
Yes
?
Yes

Examples

The first media query describes a viewport with a height of exactly 480 pixels. Note: The height of the viewport, for example in a smartphone browser is not the same as the height of the screen, because of the browser bars. If you want to describe the screen height, you have to use mediaqueries: device-height.

The second example describes viewports with height of 700 pixels and higher.

The third media query describes all viewports with a height not bigger than 699 pixels.

CSS

@media screen and ( height: 400px ) { … }

@media screen and ( min-height: 700px ) { … }

@media screen and ( max-height: 699px ) { … }