CSS Media Features - Height

CSS media feature height is used to apply different styles based on the viewport's height.

The height media feature can also be used with the min-height and max-height properties to specify the minimum and maximum height of the viewport.

Possible Values

  • <length> − The height of the viewport is represented by a specific length value, such as pixels (px) etc.

Syntax

height: <length>

CSS height - length Value

The following example demonstrates that if the value of the height media feature is equal to 150px, the background color of the element is changed to violet, otherwise background color will remain white −

<html>
<head>
<style>
   iframe {
      display: block;
   }
</style>
</head>
<body>
   
   <label id="labelHeight" for="width">Height:150</label>
   <input id="height" name="height" type="range" min="120" max="200" step="5" value="150" />
   
   <iframe
   id="block"
   srcdoc="<style> @media (height: 150px) { div { background:violet; } } </style><div>To see the effect resize your viewport's height.</div>">
   </iframe>
      
   <script>
      const updateSize = (size, label) => {
         block.style[size] = `${eval(size).value}px`;
         label.textContent = `${size}: ${eval(size).value}`;
      };
      height.oninput = () => updateSize("height", labelHeight);
   </script>
</body>
</html>

CSS height - max-height Property

The following example demonstrates that when the viewport's height is 170px or less, the background color of the box element is changed to light green, otherwise background color will remain white −

<html>
<head>
<style>
   iframe {
      display: block;
   }
</style>
</head>
<body>
   
   <label id="labelHeight" for="width">Height:150</label>
   <input id="height" name="height" type="range" min="120" max="200" step="5" value="150" />
   
   <iframe
   id="block"
   srcdoc="<style> @media (max-height: 170px) { div { background: lightgreen; } } </style><div>To see the effect resize your viewport's height.</div>">
   </iframe>
      
   <script>
      const updateSize = (size, label) => {
         block.style[size] = `${eval(size).value}px`;
         label.textContent = `${size}: ${eval(size).value}`;
      };
      height.oninput = () => updateSize("height", labelHeight);
   </script>
</body>
</html>

CSS height - min-height Property

The following example demonstrates that when the height of the viewport is greater than 140px, then the background color of the box element is changed to lightgreen, otherwise background color will remain white −

<html>
<head>
<style>
   iframe {
      display: block;
   }
</style>
</head>
<body>
   
   <label id="labelHeight" for="width">Height:150</label>
   <input id="height" name="height" type="range" min="120" max="200" step="5" value="150" />
   
   <iframe
   id="block"
   srcdoc="<style> @media (min-height: 140px) { div { background: lightgreen; } } </style><div>To see the effect resize your viewport's height.</div>">
   </iframe>
      
   <script>
      const updateSize = (size, label) => {
         block.style[size] = `${eval(size).value}px`;
         label.textContent = `${size}: ${eval(size).value}`;
      };
      height.oninput = () => updateSize("height", labelHeight);
   </script>
</body>
</html>
Advertisements