contain-intrinsic-height CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
Die contain-intrinsic-height CSS Eigenschaft legt die Höhe eines Elements fest, die ein Browser für das Layout verwenden kann, wenn das Element der GröÃenbeschränkung unterliegt.
Syntax
/* 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;
Werte
Die folgenden Werte können für ein Element angegeben werden.
none-
Das Element hat keine intrinsische Höhe.
<length>-
Das Element hat die angegebene Höhe (
<length>). auto <length>-
Ein gespeicherter Wert der "normal gerenderten" Elementhöhe, wenn eine existiert und das Element seine Inhalte überspringt (zum Beispiel, wenn es auÃerhalb des Bildschirms ist); ansonsten die angegebene
<length>.
Beschreibung
Die Eigenschaft wird häufig zusammen mit Elementen angewendet, die GröÃenbeschränkung auslösen können, wie zum Beispiel contain: size und content-visibility, und kann auch unter Verwendung der contain-intrinsic-size Kurzschreibweise gesetzt werden.
GröÃenbeschränkung ermöglicht es einem Benutzeragenten, ein Element so zu gestalten, als hätte es eine feste GröÃe, um unnötige Neuanordnungen zu verhindern, indem das Neurendern von Kindelementen vermieden wird, um die tatsächliche GröÃe zu bestimmen (und somit die Benutzererfahrung zu verbessern).
StandardmäÃig behandelt die GröÃenbeschränkung Elemente so, als hätten sie keine Inhalte, und kann das Layout auf dieselbe Weise zusammenbrechen lassen, als hätten die Inhalte keine Höhe (oder Breite).
Die contain-intrinsic-height-Eigenschaft ermöglicht es den Autoren, einen geeigneten Wert anzugeben, der als Höhe für das Layout verwendet wird.
Der auto <length>-Wert erlaubt es, die Höhe des Elements zu speichern, wenn das Element jemals "normal gerendert" wird (mit seinen Kindelementen), und dann anstelle der angegebenen Höhe verwendet wird, wenn das Element seine Inhalte überspringt.
Dies ermöglicht es, dass Elemente auÃerhalb des Bildschirms mit content-visibility: auto von der GröÃenbeschränkung profitieren, ohne dass Entwickler so präzise bei ihren Schätzungen der ElementgröÃe sein müssen.
Der gespeicherte Wert wird nicht verwendet, wenn die Kindelemente gerendert werden (wenn die GröÃenbeschränkung aktiviert ist, wird die <length> verwendet).
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | elements for which size containment can apply |
| Vererbt | Nein |
| Berechneter Wert | as specified, with <length>s values computed |
| Animationstyp | by computed value type |
Formale Syntax
contain-intrinsic-height =
auto? [ none | <length [0,â]> ]
Beispiele
Zusätzlich zu dem unten stehenden Beispiel enthält die Seite contain-intrinsic-size ein Live-Beispiel, das die Wirkung der Ãnderung der intrinsischen Breite und Höhe demonstriert.
Festlegen der intrinsischen Höhe
Der unten stehende HTML-Code definiert ein Element "contained_element", das einer GröÃenbeschränkung unterliegt und ein Kindelement enthält.
<div id="contained_element">
<div class="child_element"></div>
</div>
Der unten stehende CSS-Code setzt die content-visibility von contained_element auf auto, sodass es, wenn das Element verborgen ist, gröÃenbeschränkt wird.
Die Breite und Höhe, die verwendet werden, wenn es gröÃenbeschränkt ist, werden gleichzeitig mit contain-intrinsic-width und contain-intrinsic-height festgelegt.
#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;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-height |