Css 简明教程

CSS - Height Property

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

The height property sets the height of an element’s content area. In case, the box-sizing is set to border-box, the property height sets the height of the border area.

由 height 属性指定的值会被 min-height 和 max-height 属性定义的值覆盖。

The value specified by the height property gets oevrriden by the values defined by min-height and max-height properties.

Possible Values

length − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
percentage − A percentage of the height of the containing element.
auto − The browser will calculate the height automatically based on the content. It is the default value.
max-content: Defines the intrinsic preferred height.
min-content: Defines the intrinsic minimum height.
fit-content: Available space will be used by box, but never exceeds the max-content.
fit-content (<length-percentage>): Fit-content formula is used, i.e, min(max-content, max(min-content, <length-percentage>)).
clamp(): Enables selection of a middle value within a range of values, specified between minimum and maximum height.

Applies to

除非替换内联元素、表格列和列组以外的所有 HTML 元素。

All the HTML elements except non-replaced inline elements, table columns, and column groups.

DOM Syntax

object.style.height = "100px";

CSS Height - Length Unit

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

Here is an example of adding height to a div element in length units:

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

以下是在百分比值中向 div 元素添加高度的示例：

Here is an example of adding height to a div element in percentage values:

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

以下是在 div 元素中将高度设置为 auto 的示例：

Here is an example of adding height to a div element set as auto:

<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 - Using max-content and min-content

以下是在高度等于 max-content 和 min-content 示例：

Here is an example of height equal to max-content and 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 - Image

以下是在图像中添加高度的示例：

Here is an example of adding height to an image:

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

CSS Height - Using clamp()

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

Here is the example where clamp() function is used for setting height:

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