height media feature

Describes the height of the targeted display area of the output device. For continuous media (such as a webpage), this is the height of the viewport, including the size of a rendered scroll bar. For paged media, this is the height of the page box.

Possible values

  • Value: <length>
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: yes

Remarks

The specified length value can't be negative. For information about supported length units, see CSS Values and Units Reference.

Examples

The following declaration is a typical media query for height, using the @media rule.


@media screen and (max-height: 600px) {
div {
  border:none;
}
}

In this case, "screen" indicates the target media type, and max-height is the target media feature. The declaration states that the specified rules (no border on div elements) are only to be applied when the page is displayed on a screen, in a viewport with a height of at most 600 pixels.

You can use media properties together to create even more specific queries, such as the following:


@media screen and (max-width: 400px) and (max-height:600px) {
  ...
}

This declaration applies the specified rules when the medium is a screen, and when the viewport has a width of no more than 400 pixels and a height of no more than 600 pixels.

 

 

Show:
© 2014 Microsoft. All rights reserved.