Sets or retrieves the maximum height for an element.
Syntax
HTML { max-height : sMaxHeight } Scripting[ sMaxHeight = ] object.style.maxHeight [ = v ]
Possible Values
sMaxHeightString that specifies or receives the maximum height for an element.lengthFloating-point number followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Length Units.percentageInteger followed by a % that specifies a percentage of the containing block height to use as the maximum height of the element. If the height of the containing block is not explicitly set, then the element has no maximum height and the maxHeight property is interpreted as 0%. For more information on containing blocks and how their heights are computed, see the Cascading Style Sheets, Level 2.1 (CSS2.1) specification.The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has no default value. The Cascading Style Sheets (CSS) attribute is not inherited.
cm
mm
in
pt
pc
em
ex
px
The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has no default value. The Cascading Style Sheets (CSS) attribute is not inherited.
Remarks
maxHeight was introduced in Windows Internet Explorer 7.The min-height/max-height attributes apply to floating and absolutely positioned block level elements and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table columns and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.) This property is enabled only under the strict !DOCTYPE.
maxHeight was introduced in Windows Internet Explorer 7.
The min-height/max-height attributes apply to floating and absolutely positioned block level elements and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table columns and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)
This property is enabled only under the strict !DOCTYPE.
Example
The following example shows how the min-height and max-height attributes affect the layout of a div element. The example requires Internet Explorer 7 or later to view. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <style> .height { float:left; width:300px; background:#fff; margin:0 1em; } #example1 { min-height:200px; } #example2 { max-height:100px; } .content { border:1px solid #c00; padding:5px; } </style> </head> <body> <div class="height" id="example1"> <div class="content"> <h2>{ min-height:200px }</h2> <p>The height of this div is always at least 200px.<br/><br/> The content does not fill the entire div.</p> </div> </div> <div class="height" id="example2"> <div class="content"> <h2>{ max-height:100px }</h2> <p>This div will not grow more than 100px in height.<br/><br/> The content that does not fit in the div continues beyond it.</p> </div> </div> </body> </html> This feature requires Microsoft® Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
The following example shows how the min-height and max-height attributes affect the layout of a div element. The example requires Internet Explorer 7 or later to view.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <style> .height { float:left; width:300px; background:#fff; margin:0 1em; } #example1 { min-height:200px; } #example2 { max-height:100px; } .content { border:1px solid #c00; padding:5px; } </style> </head> <body> <div class="height" id="example1"> <div class="content"> <h2>{ min-height:200px }</h2> <p>The height of this div is always at least 200px.<br/><br/> The content does not fill the entire div.</p> </div> </div> <div class="height" id="example2"> <div class="content"> <h2>{ max-height:100px }</h2> <p>This div will not grow more than 100px in height.<br/><br/> The content that does not fit in the div continues beyond it.</p> </div> </div> </body> </html>
Standards Information
This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) .
Applies To
A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, currentStyle, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TR, TT, U, UL, VAR, XMP
See Also
Cascading Style Sheet Compatibility in Internet Explorer 7
It bears repeating. If you're having trouble getting this feature to work in IE7, make sure you've started with a strict DOCTYPE, such as:
Experience Silverlight enabled quickstart tutorials, video training, showcases & more.
By clicking "Click to Install" you accept the Silverlight License Agreement .Silverlight updates automatically, learn more .