DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft height definiert die Inhaltshöhe von Boxen und akzeptiert alle Längenwerte.
Der „Inhaltsbereich“ ist definiert als der Abstand und Rahmen zusätzlich zur Höhe/Breite oder der Größe, die der Inhalt selbst einnimmt.
Negative Werte wie height: -100px werden nicht akzeptiert. Die Eigenschaft height wird nicht auf nicht ersetzte Inline-Elemente, einschließlich Tabellenspalten und Spaltengruppen, angewendet.
.wrap {
height: auto; /* auto keyword */
height: 120px; /* length values */
height: 10em;
height: 0; /* unit-less length is OK for zero */
height: 75%; /* percentage value */
height: inherit; /* inherited value from parent element */
}Wenn die Höhe des enthaltenden Blocks nicht explizit angegeben ist und das Element nicht absolut positioniert ist, wird sein Höhenwert auf auto berechnet (es wird so hoch sein wie der darin enthaltene Inhalt, oder null, wenn kein Inhalt vorhanden ist). Wenn der **Inhaltsbereich** des Elements mehr vertikalen Platz benötigt als der zugewiesene Wert zulässt, wird das Verhalten des Elements durch die overflow-Eigenschaft bestimmt.
Bei Verwendung des Schlüsselworts auto wird die height basierend auf dem **Inhaltsbereich** des Elements berechnet, es sei denn, sie ist explizit angegeben. Das bedeutet, dass ein auf einem Prozentsatz basierender Wert immer noch der des Inhaltsbereichs des Elements ist. Ebenso, wenn die Höhe des Containers auf einen Prozentwert gesetzt ist, basiert die prozentuale Höhe eines Kindelements immer noch auf dem Inhaltsbereich dieses Kindelements.
Höhe kann auch als animierbare Eigenschaft verwendet werden.
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle | Alle |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle |
„Der „Inhaltsbereich“ ist definiert als Padding, Border und Margin eines Elements.“ Ist das richtig?
Ich denke, der Inhaltsbereich wird durch die Eigenschaften width und height eines Elements definiert.
Ja, diese Aussage verwirrt mich auch. Ich denke, sie ist falsch oder muss besser formuliert werden.
Dieser Satz im Artikel ist offensichtlich ein Fehler. Niemand hat Zeit, Korrektur zu lesen (oder Kommentare zu jahrealten Artikeln anzusehen), und es hat uns bereits Klicks gebracht…
Siehe https://www.w3.org/TR/CSS21/box.html#box-dimensions
Und eine bessere Referenz für „Inhaltshöhe“ als die vom Artikel verlinkte URL wäre https://www.w3.org/TR/CSS21/visudet.html#the-height-property
Die Existenz von „box-sizing: border-box“ bedeutet, dass wir nicht uneingeschränkt sagen können „Der Inhaltsbereich wird durch (oder als) Breiten- und Höheneigenschaften definiert…“. Und sowieso ist „definiert als“ nicht dasselbe wie „definiert durch“. Aber für die Standardeinstellung (entspricht box-sizing: content-box) ist das gut genug. Vor allem, da „Inhaltsbereich“ in der Spezifikation nicht präzise definiert zu sein scheint, daher ist es am besten, sich an Dinge zu halten, die es sind, wie Höhe, Breite und Padding. Ich weiß nicht, was der Autor genau schreiben wollte, aber eine konzeptionelle Definition von „Inhaltsbereich“ könnte lauten: „der Bereich innerhalb des Paddings“.
:q!
hängt von Ihren box-sizing-Einstellungen in CSS ab.
Und wie wird die Höhe berechnet, wenn die Höhe des enthaltenden Blocks angegeben ist und der enthaltende Block absolut positioniert ist?
Manchmal hat die Höhe eines Elements nichts mit der Höhe des darin enthaltenen Inhalts zu tun.
Ein Div, das zwei schwebende Divs enthält, die jeweils eine Höhe von 100px haben, hat die Höhe des Div-Containers 0. Eine gute Erklärung mit einer Demo finden Sie unter diesem Link: https://devserver-002.info/floating_div_scam//floatdemo/
Aber dann erklären Sie nicht, was passiert, wenn die Höhe des enthaltenden Blocks *definiert* ist. Was passiert dann mit der Höhe des Elements, wenn es auf 100 % gesetzt ist?