css中怎样使calc计算的高度生效？

在 CSS 中，calc() 函数用于动态计算长度、大小或其他值。对于计算后的高度要生效，通常父元素需要具备一定的高度定义。你可以通过以下几种方式设置父元素的高度：

1、固定高度：父元素使用固定高度，如 height: 500px;，这样子元素的 calc() 计算会基于这个高度进行。

2、百分比高度：如果父元素的高度是百分比，那么其父元素（祖先元素）也需要有固定高度或百分比高度，最终回溯到一个具有固定高度的元素。

3、vh 单位：父元素可以使用 vh（视口高度单位）来设置高度，这样子元素的 calc() 计算也可以生效。

示例 1：父元素有固定高度

<div class="parent">
    <div class="child">子元素</div>
</div>

<style>
  .parent {
    height: 500px; /* 固定高度 */
    background-color: lightblue;
  }
  
  .child {
    height: calc(100% - 50px); /* 高度为父元素高度的100%减去50px */
    background-color: coral;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

示例 2：父元素使用 vh 单位

<div class="parent">
    <div class="child">子元素</div>
</div>

<style>
  .parent {
    height: 50vh; /* 使用视口高度单位 */
    background-color: lightblue;
  }
  
  .child {
    height: calc(100% - 50px); /* 高度为父元素高度的100%减去50px */
    background-color: coral;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这两个示例中，calc() 函数都可以正常计算子元素的高度，并且该高度基于父元素的高度进行计算。第一种情况下，父元素的高度是固定的 500px，而第二种情况下，父元素的高度是视口高度的 50%。