| 类名 | 样式 |
|---|---|
| .h-25 | height: 25%; |
| .h-50 | height: 50%; |
| .h-75 | height: 75%; |
| .h-100 | height: 100%; |
| .h-auto | height: auto; |
| .h-min | height: min-content; |
| .h-max | height: max-content; |
| .h-fit | height: fit-content; |
| .max-h-100 | max-height: 100%; |
| .min-h-0 | min-height: 0; |
| .min-h-100 | min-height: 100%; |
| .vh-100 | height: 100vh; |
| .min-vh-100 | min-height: 100vh; |
| .dvh-100 | height: 100dvh; |
| .min-dvh-100 | min-height: 100dvh; |
使用高度工具类来设置元素的高度。高度工具类由工具类 API 生成，并支持百分比值、内在尺寸关键字以及视口单位。
相对高度
使用基于百分比的工具将高度设置为相对于父元素。默认情况下包括对25%、50%、75%、100%和auto的支持。
<div style="height: 100px;">
<div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
</div>固有尺寸
使用内在尺寸关键字根据内容设置高度。
<div style="height: 200px;">
<div class="h-min d-inline-block p-3" style="width: 120px;">Height min-content</div>
<div class="h-max d-inline-block p-3" style="width: 120px;">Height max-content</div>
<div class="h-fit d-inline-block p-3" style="width: 120px;">Height fit-content</div>
</div>最大高度
使用 max-height 工具设置最大高度。
<div style="height: 100px;">
<div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>最小高度
使用 min-height 工具设置最小高度。
<div class="min-h-0 p-3" style="width: 200px;">
Min-height 0 (allows content to determine height)
</div>
<div class="min-h-100 p-3" style="width: 200px;">Min-height 100%</div>视口高度
使用视口单位设置高度。
<div class="vh-100">Height 100vh</div>
<div class="min-vh-100">Min-height 100vh</div>
全视口高度的区块！ 使用 vh-100 可以让元素占据整个视口高度，这对于首页主视觉区块和全屏布局非常有用。在移动浏览器上，vh-100 可能比可见区域更高。参见 动态视口高度。
动态视口高度
在移动浏览器上，当用户滚动时，URL栏和工具栏会隐藏和显示。vh 单位在这种情况下不会改变。它始终测量浏览器UI隐藏时的视口。具有 vh-100 的元素因此在URL栏显示时比可见区域更高。元素的底部保持在屏幕外。
dvh 单位测量用户当前看到的区域。当浏览器隐藏或显示浏览器 UI 时，浏览器会更新该值。使用 dvh-100 和 min-dvh-100 可在每个设备上填充可见区域。
<div class="dvh-100">Height 100dvh</div>
<div class="min-dvh-100">Min-height 100dvh</div>
我应该使用哪个单位？ 对于全屏移动布局（例如英雄区和全高面板），使用 dvh。当你需要一个不会变化的高度时，使用 vh。浏览器在浏览器界面动画时会重新计算 dvh，所以内容可能会移动。浏览器从不重新计算 vh，但元素可能会溢出可见区域。
小和大视口单位
CSS 为你提供了另外两种视口单位：
svh是小视口高度。它在浏览器 UI 显示时测量视口。lvh是大视口高度。它在浏览器 UI 隐藏时测量视口。当前浏览器给vh相同的值。
我们不为 svh 和 lvh 提供工具，因为大多数布局需要 dvh。可以使用 工具 API 添加它们：
// my-bootstrap.scss
@use "bootstrap/scss/bootstrap" with (
$utilities: (
"small-viewport-height": (
property: height,
class: svh,
values: (100: 100svh)
),
"min-small-viewport-height": (
property: min-height,
class: min-svh,
values: (100: 100svh)
),
"large-viewport-height": (
property: height,
class: lvh,
values: (100: 100lvh)
),
"min-large-viewport-height": (
property: min-height,
class: min-lvh,
values: (100: 100lvh)
)
)
);
这会添加 .svh-100、.min-svh-100、.lvh-100 和 .min-lvh-100。
Bootstrap 6 支持的每个浏览器都有 dvh、svh 和 lvh。请阅读 浏览器与设备 以了解完整的支持政策。
我们为宽度轴提供相同的工具类，dvw-100 和 min-dvw-100。阅读 动态视口宽度 以了解宽度单位的不同。
CSS
Sass 工具 API
高度工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。
"height": (
property: height,
class: h,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
min: min-content,
max: max-content,
fit: fit-content,
)
),
"max-height": (
property: max-height,
class: max-h,
values: (100: 100%)
),
"min-height": (
property: min-height,
class: min-h,
values: (
0: 0,
100: 100%,
),
),
"viewport-height": (
property: height,
class: vh,
values: (100: 100vh)
),
"min-viewport-height": (
property: min-height,
class: min-vh,
values: (100: 100vh)
),
"dynamic-viewport-height": (
property: height,
class: dvh,
values: (100: 100dvh)
),
"min-dynamic-viewport-height": (
property: min-height,
class: min-dvh,
values: (100: 100dvh)
),