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
|
---
title: calc
slug: Web/CSS/calc()
tags:
- CSS
- CSS Funktion
- Referenz
translation_of: Web/CSS/calc()
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.</p>
<p>calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<pre class="syntaxbox notranslate">/* Eigenschaft: calc(<em>Ausdruck</em>) */
width: calc(100% - 80px);</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt>Ausdruck</dt>
<dd>Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.</dd>
</dl>
<h3 id="Ausdrücke">Ausdrücke</h3>
<p>Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:</p>
<dl>
<dt><strong>+</strong></dt>
<dd>Addition.</dd>
<dt><strong>-</strong></dt>
<dd>Subtraktion.</dd>
<dt><strong>*</strong></dt>
<dd>Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).</dd>
<dt><strong>/</strong></dt>
<dd>Division (Divisor muss eine {{cssxref("<number>")}} sein).</dd>
</dl>
<p>Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.<br>
Das Setzen von Klammern ist ebenfalls möglich.</p>
<p><code>calc()</code>-Funktionen können ineinander verschachtelt werden.</p>
<div class="note"><strong>Hinweis:</strong> Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde <code>calc(50% -8px)</code> als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: <code>calc(50% - 8px)</code><br>
Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.</div>
<div class="note">Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen <em>können</em> vom Browser als Wert <code>auto</code> behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.</div>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Relative_Größe_eines_Objekts_mit_einer_absoluten_Positionierung">Relative Größe eines Objekts mit einer absoluten Positionierung</h3>
<p>Mit <code>calc()</code> ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.</p>
<p>In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.</p>
<p>Links ist die Position mit <code>left: 40px</code> definiert. Mit <code>calc(100% - 80px)</code> werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.</p>
<pre class="brush: css notranslate">.banner {
position: absolute;
left: 40px;
width: 90%; /* fallback for browsers without support for calc() */
width: calc(100% - 80px);
}
</pre>
<pre class="brush: html notranslate"><div class="banner">This is a banner!</div></pre>
<p>{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}</p>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Anmerkung</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("css.types.calc")}}</p>
<h2 id="See_also" name="See_also">Siehe auch</h2>
<ul>
<li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog"><u><font color="#0066cc">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</font></u></a></li>
</ul>
|
