css 标签高度百分比的实现方式

在 CSS 中，实现高度百分比的方式有多种，以下是常见的几种方法及其适用场景：

1. 基于父容器的高度百分比

原理：子元素的 height 百分比值基于其直接父容器的高度。
条件：父容器的高度必须明确（例如通过 height 属性设置固定值或百分比）。

示例代码：

<div class="parent" style="height: 300px; border: 1px solid black;">
  <div class="child" style="height: 50%; background-color: lightblue;">
    我的高度是父容器高度的50%。
  </div>
</div>

2. 基于祖先容器的高度百分比

原理：通过绝对定位 (position: absolute) 和祖先容器的相对定位 (position: relative)，可以让子元素的高度基于更上层的祖先容器。
条件：祖先容器需要设置 position: relative 或其他非静态定位。

示例代码：

<div class="grandparent" style="height: 400px; position: relative; border: 2px solid red;">
  <div class="parent" style="height: 200px; border: 1px solid green;">
    <div class="child" style="position: absolute; height: 50%; width: 100%; background-color: lightblue;">
      我的高度是“爷爷级”标签高度的50%。
    </div>
  </div>
</div>

3. 使用 CSS 变量传递高度

原理：通过定义和传递 CSS 变量，间接实现子元素高度基于某个祖先容器的高度。
条件：需要在祖先容器中定义高度变量，并在子元素中引用。

示例代码：

<div class="grandparent" style="height: 400px; --gp-height: 400px; border: 2px solid red;">
  <div class="parent" style="height: 200px; border: 1px solid green;">
    <div class="child" style="height: calc(var(--gp-height) * 0.5); background-color: lightblue;">
      我的高度是“爷爷级”标签高度的50%。
    </div>
  </div>
</div>

4. 使用 Flexbox 布局

原理：在 Flexbox 布局中，子元素可以自动继承父容器的高度，或者通过 flex-grow 和 flex-basis 控制其高度比例。
条件：父容器需要设置为 display: flex 或 display: inline-flex。

示例代码：

<div class="parent" style="display: flex; flex-direction: column; height: 400px; border: 2px solid red;">
  <div class="child" style="flex: 1; background-color: lightblue;">
    我会自适应父容器的高度。
  </div>
</div>

5. 使用 Grid 布局

原理：在 CSS Grid 布局中，可以通过 grid-template-rows 或 grid-template-columns 定义行或列的高度比例。
条件：父容器需要设置为 display: grid。

示例代码：

<div class="parent" style="display: grid; grid-template-rows: 1fr; height: 400px; border: 2px solid red;">
  <div class="child" style="background-color: lightblue;">
    我的高度是父容器高度的100%。
  </div>
</div>

6. 基于视口高度（Viewport Height）

原理：使用 vh 单位，直接基于视口的高度设置元素的高度。
条件：适用于需要直接依赖浏览器窗口高度的场景。

示例代码：

<div class="child" style="height: 50vh; background-color: lightblue;">
  我的高度是视口高度的50%。
</div>

总结表格

方法	实现方式	适用场景
父容器高度百分比	子元素高度基于直接父容器高度	父容器高度明确
祖先容器高度百分比	绝对定位 + 祖先容器相对定位	需要基于更上层的祖先容器高度
CSS 变量	使用变量传递高度	动态计算高度
Flexbox 布局	子元素自动继承或按比例分配父容器高度	弹性布局
Grid 布局	通过网格定义行/列高度比例	复杂布局
视口高度 (`vh`)	直接基于视口高度设置	需要依赖浏览器窗口高度