contain-intrinsic-height

基线 2023

新发布

自 2023 年 9 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能在较旧的设备或浏览器中无法使用。

contain-intrinsic-height CSS 属性设置元素的高度，浏览器可以在元素受到 尺寸限制 时使用该高度进行布局。

语法

css
/* Keyword values */
contain-intrinsic-height: none;

/* <length> values */
contain-intrinsic-height: 1000px;
contain-intrinsic-height: 10rem;

/* auto <length> */
contain-intrinsic-height: auto 300px;

/* Global values */
contain-intrinsic-height: inherit;
contain-intrinsic-height: initial;
contain-intrinsic-height: revert;
contain-intrinsic-height: revert-layer;
contain-intrinsic-height: unset;

值

以下值可以为元素指定。

none

元素没有内在高度。

<length>

元素具有指定的高度 (<length>).

auto <length>

如果存在，则为“正常渲染”的元素高度的已保存值，并且元素正在跳过其内容（例如，当它处于屏幕外时）；否则为指定的 <length>。

描述

此属性通常与可以触发尺寸限制的元素一起使用，例如 contain: size 和 content-visibility，并且也可以使用 contain-intrinsic-size 简写属性 设置。

尺寸限制允许用户代理将元素布局得好像它具有固定大小一样，通过避免重新渲染子元素来确定实际大小（从而改善用户体验）来防止不必要的回流。默认情况下，尺寸限制会将元素视为没有内容，并且可能会像内容没有高度（或宽度）一样折叠布局。contain-intrinsic-height 属性允许作者指定一个适当的值作为布局的高度。

auto <length> 值允许在元素“正常渲染”（包含其子元素）时存储元素的高度，并在元素跳过其内容时使用该存储的高度，而不是指定的高度。这样一来，具有 content-visibility: auto 的屏幕外元素就可以从大小限制中受益，而无需开发人员对元素大小进行精确估计。如果子元素正在渲染，则不会使用存储的值（如果启用了大小限制，则将使用<length>）。

正式定义

初始值none
应用于可以应用大小限制的元素
继承否
计算值按指定，计算 <length> 值
动画类型按计算值类型

正式语法

contain-intrinsic-height = 
  auto? [ none | <length> ]

示例

除了下面的示例，contain-intrinsic-size 页面包含一个实时示例，演示了修改内在宽度和高度的效果。

设置内在高度

下面的 HTML 定义了一个将受到大小限制的元素“contained_element”，该元素包含一个子元素。

html
<div id="contained_element">
  <div class="child_element"></div>
</div>

下面的 CSS 将 contained_element 的 content-visibility 设置为 auto，因此如果元素被隐藏，它将受到大小限制。当元素受到大小限制时使用的宽度和高度分别使用 contain-intrinsic-width 和 contain-intrinsic-height 设置。

css
#contained_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

规范

规范
CSS 盒模型模块级别 4
# propdef-contain-intrinsic-height

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅