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.

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 ) { … }



Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?