contain-intrinsic-height

語法

/* 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>），則不使用記憶值。

正式定義

正式語法

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

示例

除了下面的示例，contain-intrinsic-size 頁面還包含一個即時示例，演示了修改固有寬度和高度的效果。

設定固有高度

下面的 HTML 定義了一個將受到尺寸約束的元素“contained_element”，該元素包含一個子元素。

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

下面的 CSS 將 contained_element 的 content-visibility 設定為 auto，因此如果元素被隱藏，它將受到尺寸限制。在受尺寸限制時使用的寬度和高度分別使用 contain-intrinsic-width 和 contain-intrinsic-height 同時設定。

#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;
}

規範

瀏覽器相容性

另見

• content-visibility：提升渲染效能的全新 CSS 屬性 (web.dev)
• contain-intrinsic-size
• contain-intrinsic-width
• contain-intrinsic-block-size
• contain-intrinsic-inline-size