CSS 属性

height 属性设置元素内容区域的高度。如果 box-sizing 设置为 border-box，则属性 height 设置边框区域的高度。

height 属性指定的值由 min-height 和定义的值获取 oevriden max-height 属性。

属性值

  • length: 特定的长度值，例如像素 (px)、厘米 (cm)、英寸（英寸）等。

  • percentage: 包含元素的高度百分比。

  • auto: 包含元素的高度百分比。浏览器会根据内容自动计算高度。这是默认值。

  • max-content:定义固有的首选高度.

  • min-content:定义固有的最小高度。

  • fit-content:可用空间将被盒子使用，但永远不会超过最大内容.

  • fit-content (<length-percentage>):Fit-content使用公式，即 min(max-content, max(min-content, <length-percentagenotransR))。

  • clamp():允许选择范围内的中间值值的范围，在最小和最大高度之间指定。

不接受像 height: -200px 这样的负值。

适用范围

除不可替换的内联元素、表格列和列组之外的所有 HTML 元素。

DOM 语法

object.style.height = "100px";

CSS height : 长度单位

以下是以长度单位向 div 元素添加高度的示例:

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.a {
      height: 100px;
      background-color: rgb(230, 230, 203);
   }
   div.b {
      height: 2.5in;
      background-color: rgb(230, 230, 203);
   }
</style>
</head>
<body>
   <div class="a">This div element has a height of 100px.</div>
   <div class="b">This div element has a height of 2.5 inches.</div>
</body>
</html>

CSS height: 百分比值

这里是以百分比值向 div 元素添加高度的示例:

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.a {
      height: 80%;
      background-color: rgb(230, 230, 203);
   }
   div.b {
      height: 120%;
      background-color: rgb(236, 190, 190);
   }
</style>
</head>
<body>
   <div class="a">This div element has a height of 80%.</div>
   <div class="b">This div element has a height of 120%.</div>
</body>
</html>

CSS height: auto

以下是向设置为auto的 div 元素添加高度的示例:

<html>
<head>
<style>
   div.auto {
      height: auto;
      background-color: yellow;
      padding: 20px;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div class="auto">This div element has a height set as auto.</div>
</body>
</html>

CSS height: max-content 和 min-content

以下是高度等于 max-content 和 min-content 的示例:

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
   }
   div.c {
      height: max-content;
      background-color: bisque;
   }
   div.d {
      height: min-content;
      background-color: darkseagreen;
   }
</style>
</head>
<body>
   <div class="c">This div element has a height as max-content. This div element has a height as max-content.
   This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div>
   <div class="d">This div element has a height of min-content.</div>
</body>
</html>

CSS height: 图像

以下是为图像添加高度的示例:

<html>
<head>
<style>
   .demoImg {
      margin-top: 15px;
      height: 200px;
      margin-right: 0.5in;
   }
</style>
</head>
<body>
   <img class="demoImg" src="/css/images/scancode.png" alt="image-height">
</body>
</html>

CSS height: clamp()

以下是clamp() 的示例函数用于设置高度:

<html>
<head>
<style>
   p{
      display: inline-flex;
      border: 1px solid black;
      background-color: yellow;
      height: clamp(20px, 100px, 180px);
      width: clamp(50px, 100px, 200px);
      padding: 1em;
      margin: 2em;
   }
</style>
<body>
   <div>
      <p>The clamp function is used for height & width, where the background color is selected for the value between the
      min and max ranges of height and width.</p>
   </div>
</body>
</html>

CSS height: 相关属性

以下是高度相关的CSS属性列表:

属性值
max-height设置元素高度的上限。
min-height集合元素高度的下限。
min-content设置内容的内在最小高度。
max-content设置内在内容的最大高度。
fit-content适合内容，具体取决于
fit-content()夹子基于公式 min(最大尺寸, max(最小尺寸, 参数)) 的给定尺寸。