CSS 媒體特性 - 高度

CSS 媒體特性 height 用於根據視口的高度應用不同的樣式。

height 媒體特性也可以與 min-height 和 max-height 屬性一起使用，以指定視口的最小和最大高度。

可能的值

<length> − 視口的高度由特定的長度值表示，例如畫素 (px) 等。

語法

height: <length>

CSS height - length 值

以下示例演示瞭如果 height 媒體特性的值為 150px，則元素的背景顏色將更改為紫色，否則背景顏色將保持白色：

<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 屬性

以下示例演示了當視口的高度為 170px 或更小時，盒元素的背景顏色將更改為淺綠色，否則背景顏色將保持白色：

<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 屬性

以下示例演示了當視口的高度大於 140px 時，盒元素的背景顏色將更改為淺綠色，否則背景顏色將保持白色：

<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>

列印頁面