min-height Attribute | minHeight Property
Gets or sets the minimum height for an element.
Syntax
CSS { min-height : sMinHeight } Scripting [ sMinHeight = ] object.style.minHeight [ = sMinHeight ]
Possible Values
sMinHeight String that specifies or receives the minimum height for an element.
- length
- Floating-point number followed by an absolute units designator (
cm,mm,in,pt, orpc) or a relative units designator (em,ex, orpx). For more information about the supported length units, see CSS Length Units.- percentage
- Integer followed by a percent sign (%) that specifies a percentage of the containing block height to use as the minimum height of the element. If the height of the containing block is not explicitly set, then the element has no minimum height and the minHeight property is interpreted as 0%.
For Microsoft Internet Explorer 6, information on containing blocks and how the height is computed, see the Cascading Style Sheets, Level 2 (CSS2) specification.
For Windows Internet Explorer 7, 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.
Remarks
In Internet Explorer 6, this property applies only to td, th, and tr elements in fixed-layout tables. To create a fixed-layout table, set the tableLayout property of a table element to
fixed. The advantage of a fixed-layout table is that it renders faster than an auto-layout table. Auto-layout tables are the default.In Internet Explorer 7, the min-height/ max-height attributes apply to floating and absolutely positioned block, inline-block elements, and 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.)
In Internet Explorer 7, this property is enabled only under the strict !DOCTYPE.
Examples
The following Internet Explorer 6 example shows the benefits of using the min-height attribute over the HEIGHT attribute for a tr element.
<html> <head> <title>min-height Attribute Example</title> </head> <body> <table border="1" style="table-layout: fixed; width: 100%;"> <tr> <td style="height: 35px; background-color: #99CCFF">This cell has the <b> height</b> attribute set to 35px. In Internet Explorer, overflow text is clipped when <b>height</b> is set on cells or rows in fixed-layout tables. Setting the <b>min-height</b> attribute, however, accommodates overflow text by increasing the cell or row height.</td> </tr> <tr> <td style="min-height: 35px; background-color: #99CCFF">This cell has the <b>min-height</b> attribute set to 35px. In Internet Explorer, overflow text is clipped when <b>height</b> is set on cells or rows in fixed-layout tables. Setting the <b>min-height</b> attribute, however, accommodates overflow text by increasing the cell or row height.</td> </tr> </table> </body> </html>Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/minheight.htm
The following Internet Explorer 7 example shows how the min-height and max-height attributes affect the layout of a div element. Internet Explorer 7 is required to view the example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <style type="text/css"> .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>Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/minHeight7.htm
err! missing description.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <style type="text/css"> .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>Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/minHeight7.htm
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, CSSStyleDeclaration, 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, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor
See Also
Cascading Style Sheet Compatibility in Internet Explorer 7, CSS Enhancements in Internet Explorer 6, height
