mozilla

Compare Revisions

max-height

Change Revisions

Revision 311391:

Revision 311391 by trevorh on

Revision 318809:

Revision 318809 by teoli on

Title:
max-height
max-height
Slug:
CSS/max-height
CSS/max-height
Tags:
"css", "CSS Reference"
"css", "CSS Reference"
Content:

Revision 311391
Revision 318809
nn16    <p>
17      {{ Cssxref("max-height") }} overrides {{cssxref("height")}}
 >, but {{ Cssxref("min-height") }} overrides {{ Cssxref("max-heigh
 >t") }}.
18    </p>
n39    <pre class="eval">n42    <pre class="twopartsyntaxbox">
40max-height:  &lt;length&gt; | &lt;percentage&gt; | none | inherit43Formal syntax:  &lt;length&gt; | &lt;percentage&gt; | none | max-
 >content | min-content | fit-content | fill-available
44</pre>
45    <pre>
46max-height: 3.5em
47max-height: 75%
48max-height: none
49max-height: max-content
50max-height: min-content
51max-height: fit-content
52max-height: fill-available
53 
54max-height: inherit
n47        &lt;length&gt;n61        <code>&lt;length&gt;</code>
n53        &lt;percentage&gt;n67        <code>&lt;percentage&gt;</code>
n59        nonen73        <code>none</code>
nn77      </dd>
78      <dt>
79        <code>max-content</code>{{experimental_inline()}}
80      </dt>
81      <dd>
82        The intrinsic preferred height.
83      </dd>
84      <dt>
85        <code>min-content</code>{{experimental_inline()}}
86      </dt>
87      <dd>
88        The intrinsic minimum height.
89      </dd>
90      <dt>
91        <code>fill-available</code>{{experimental_inline()}}
92      </dt>
93      <dd>
94        The containing block height minus horizontal margin, bord
 >er and padding. Some browsers implement an ancient name for this 
 >keyword, <code>available</code>.
95      </dd>
96      <dt>
97        <code>fit-content</code>{{experimental_inline()}}
98      </dt>
99      <dd>
100        The same as <code>max-content.</code>
n73    <h2 id="Notes" name="Notes">n111    <h2 id="Specifications">
74      Notes
75    </h2>
76    <p>
77      {{ Cssxref("max-height") }} overrides height, but {{ Cssxre
>f("min-height") }} overrides {{ Cssxref("max-height") }}. 
78    </p>
79    <h2 id="Specifications" name="Specifications">
n82    <ul>n114    <table class="standard-table">
83      <li>115      <tbody>
84        <a class="external" href="http://www.w3.org/TR/CSS21/visu116        <tr>
>det.html#min-max-heights" title="http://www.w3.org/TR/CSS21/visud 
>et.html#min-max-heights">CSS 2.1 #min-max-heights</a> 
117          <th scope="col">
118            Specification
119          </th>
120          <th scope="col">
121            Status
122          </th>
123          <th scope="col">
124            Comment
125          </th>
85      </li>126        </tr>
127        <tr>
128          <td>
129            {{ SpecName('CSS3 Sizing', '#width-height-keywords', 
 >'max-height') }}
130          </td>
131          <td>
132            {{ Spec2('CSS3 Sizing') }}
133          </td>
134          <td>
135            Adds the <code>max-content</code>, <code>min-content<
 >/code>, <code>fit-content</code>, and <code>fill-available</code>
 > keywords.<br>
136            <em>Both CSS3 Box and CSS3 Writing Modes drafts defin
 >ed at some point these keywords. These drafts are superseded by t
 >his spec.</em>
137          </td>
138        </tr>
139        <tr>
140          <td>
141            {{ SpecName('CSS3 Transitions', '#animatable-css', 'm
 >ax-height') }}
142          </td>
143          <td>
144            {{ Spec2('CSS3 Transitions') }}
145          </td>
146          <td>
147            Defines <code>max-height</code> as animatable.
148          </td>
149        </tr>
150        <tr>
151          <td>
152            {{ SpecName('CSS2.1', 'visudet.html#min-max-heights',
 > 'max-height') }}
153          </td>
154          <td>
155            {{ Spec2('CSS2.1') }}
156          </td>
157          <td>
158            Initial definition.
159          </td>
160        </tr>
161      </tbody>
86    </ul>162    </table>
87    <h2 id="Browser_compatibility">163    <h2 id="Browser_Compatibility" name="Browser_Compatibility">
n113              Safarin189              Safari (WebKit)
n124              {{ CompatGeckoDesktop("1") }}n200              {{CompatGeckoDesktop("1.0")}}
nn210            </td>
211          </tr>
212          <tr>
213            <td>
214              applies to <code>&lt;table&gt;</code> [1]
215            </td>
216            <td>
217              {{ CompatNo() }}
218            </td>
219            <td>
220              {{CompatVersionUnknown()}}
221            </td>
222            <td>
223              {{ CompatNo() }}
224            </td>
225            <td>
226              {{CompatVersionUnknown()}}
227            </td>
228            <td>
229              {{ CompatNo() }}
230            </td>
231          </tr>
232          <tr>
233            <td rowspan="1">
234              <code>max-content</code>, <code>min-content</code>,
 > <code>fit-content</code>, and <code>fill-</code><code>available<
 >/code> {{ experimental_inline() }}
235            </td>
236            <td>
237              {{ CompatNo() }} [3]
238            </td>
239            <td>
240              {{CompatGeckoDesktop("1.9")}}{{property_prefix("-mo
 >z")}} [2]
241            </td>
242            <td rowspan="1">
243              {{ CompatNo() }}
244            </td>
245            <td rowspan="1">
246              {{ CompatNo() }}
247            </td>
248            <td>
249              {{ CompatNo() }} [3]
n167              1.0n283              {{ CompatUnknown() }}
168            </td>
169            <td>284            </td>
170              {{ CompatGeckoMobile("1") }}
171            </td>285            <td>
286              {{ CompatUnknown() }}
172            <td>287            </td>
173              6.0
174            </td>288            <td>
289              {{ CompatUnknown() }}
175            <td>290            </td>
176              6.0
177            </td>291            <td>
292              {{ CompatUnknown() }}
178            <td>293            </td>
179              1.0294            <td>
295              {{ CompatUnknown() }}
nn301    <h3 id="Notes">
302      Notes
303    </h3>
304    <p>
305      [1] CSS 2.1 explicitely leaves the behavior of <code>max-he
 >ight</code> with {{ HTMLElement("table") }} undefined. Therefore 
 >any behavior is CSS2.1-compliant; newer CSS specifications may de
 >fine this behavior, so Web developers shouldn't rely on a specifi
 >c one now.
306    </p>
307    <p>
308      [2] Gecko experimentally implements the definitions given i
 >n CSS3 Basic Box. This one defines <code>available</code> and not
 > <code>fill-available</code>. Also the definition of <code>fit-co
 >ntent</code> is simpler than in CSS3 Sizing.
309    </p>
310    <p>
311      [3] WebKit implements an earlier proposal for setting the h
 >eight to an intrinsic height: the keywords <code>intrinsic</code>
 >, instead of <code>max-content</code>, and <code>min-intrinsic</c
 >ode>, instead of <code>min-content</code> There is no equivalent 
 >for <code>fill-available</code> or <code>fit-content</code>.
312    </p>
t189      <a href="/en-US/docs/CSS/box_model" title="en/CSS/box_modelt317      <a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model
>">box model</a>, {{ Cssxref("max-width") }}, {{ Cssxref("box-sizi>">The box model</a>, {{ Cssxref("max-width") }}, {{ Cssxref("box-
>ng") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}>sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}

Back to History