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


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


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

@media screen and (max-height: 600px) {
div {

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.