CSS 高度

CSS 高度属性

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

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

语法

CSS 允许以多种方式设置元素的高度。让我们来检查所有可能的语法来设置元素的高度。

长度值

height: 120px;
height: 10em;
height: 100vh;

百分比值

height: 75%;
height: 50%;

关键词值

height: auto;
height: max-content;
height: min-content;
height: fit-content(20em);

全局值

height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

不能接受诸如height: -200px之类的负值。

适用于

除非是非替换型内联元素、表格列和列组，否则适用于所有HTML元素。

DOM语法

object.style.height = "100px";

CSS高度 – 长度值

CSS允许将元素的高度设置为特定的长度单位，例如像素（px），厘米（cm），英寸（in）等。以下是将高度添加到div元素中的示例：

<html>
<head>
<style>
   div {
      border: 1px solid black;
      margin-bottom: 5px;
      padding:10px;
   }
   div.a {
      height: 100px;
      background-color: rgb(230, 230, 203);
   }
   div.b {
      height: 1.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 1.5 inches.</div>
</body>
</html>

CSS 高度 – 百分比值

CSS 允许将元素的高度设置为包含元素高度的百分比。以下是以百分比值为 div 元素添加高度的示例：

<html>
<head>
<style>
   .parent{
      border: 1px solid black;
      height: 100px;
      background-color: rgb(230, 230, 203);
   }
   .child{
      border: 1px solid black;
      height: 80%;
      background-color: rgb(76 175 80);
   }
</style>
</head>
<body>
   <div class="parent">
       <div class="child">
        <p>This div element has a 80% height of the parent.</p>
       </div>
   </div>
</body>
</html>

CSS高度 – 自动值

下面是一个将div元素的高度设置为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 高度 – max-content/min-content

这是一个高度等于 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 高度 – 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>