1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: height
slug: Web/CSS/height
tags:
- CSS
- CSS Eigenschaft
- Referenz
translation_of: Web/CSS/height
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <strong><code>height</code></strong> CSS Eigenschaft bestimmt die Höhe des Inhaltsbereichs eines Elements. Der <a href="/de/docs/Web/CSS/Boxmodell#Inhalt">Inhaltsbereich</a> ist <em>innerhalb</em> des Innenabstands, der Rahmen und des Außenabstands des Elements.</p>
<p>Die Eigenschaften {{cssxref("min-height")}} und {{cssxref("max-height")}} überschreiben <code>height</code>.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* Schlüsselwortwert */
height: auto;
/* <length> Werte */
height: 120px;
height: 10em;
/* <percentage> Wert */
height: 75%;
/* Globale Werte */
height: inherit;
height: initial;
height: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code><length></code></dt>
<dd>Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd>
<dt><code><percentage></code></dt>
<dd>Definiert als eine {{cssxref("<percentage>")}} der Höhe des beinhaltenden Blocks.</dd>
<dt><code>border-box </code>{{experimental_inline}}</dt>
<dd>Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Rahmenbox des Elements angewendet.</dd>
<dt><code>content-box</code> {{experimental_inline}}</dt>
<dd>Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Inhaltsbox des Elements angewendet.</dd>
<dt><code>auto</code></dt>
<dd>Der Browser berechnet und wählt die Höhe für das angegebene Element aus.</dd>
<dt><code>max-content</code> {{experimental_inline}}</dt>
<dd>Die innere bevorzugte Höhe.</dd>
<dt><code>min-content</code> {{experimental_inline}}</dt>
<dd>Die innere Minimalhöhe.</dd>
<dt><code>available</code> {{experimental_inline}}</dt>
<dd>Die Höhe des beinhaltenden Blocks minus vertikaler Außenabstand, Rahmen und Innenabstand.</dd>
<dt><code>fit-content</code> {{experimental_inline}}</dt>
<dd>Die größere der:
<ul>
<li>inneren Minimalhöhe</li>
<li>kleineren der inneren bevorzugten und der verfügbaren Höhe</li>
</ul>
</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
{{csssyntax}}
<h2 id="Beispiel">Beispiel</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="red">
<span>Ich bin 50 Pixel hoch.</span>
</div>
<div id="green">
<span>Ich bin 25 Pixel hoch.</span>
</div>
<div id="parent">
<div id="child">
<span>Ich bin halb so groß wie mein Elternelement.</span>
</div>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
width: 250px;
margin-bottom: 5px;
border: 3px solid #999999;
}
#red {
height: 50px;
}
#green {
height: 25px;
}
#parent {
height: 100px;
}
#child {
height: 50%;
width: 75%;
}
</pre>
<p>{{EmbedLiveSample('Beispiel')}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> und <code>content-box</code> hinzu.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Definiert <code>height</code> als animierbar.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Fügt Unterstützung für {{cssxref("<length>")}} Werte hinzu und präzisiert, für welche Elemente die Eigenschaft gilt.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#height', 'height')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.properties.height")}}
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/CSS/Boxmodell">Boxmodell</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
</ul>
|
