min-height property

Specifies the minimum height for an element.

CSS 2.1, Section 10.7

Syntax

min-height: <length> | <percentage>

Property values

A VARIANT that specifies or receives the minimum height for an element.

length

Floating-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 Values and Units Reference.

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 min-height property is interpreted as 0%. For a Windows Store app using JavaScript, information on containing blocks and how the height is computed, see the Cascading Style Sheets, Level 2 (CSS2) specification. For a Windows Store app using JavaScript, see the Cascading Style Sheets, Level 2.1 (CSS2.1) specification.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value0

Standards information

Remarks

In a Windows Store app using JavaScript, this property applies only to td, th, and tr elements in fixed-layout tables. To create a fixed-layout table, set the table-layout 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.

Examples

The following example shows how the min-height and max-height properties affect the layout of a div element.


body {
   background-color: #E3E3E3;
}
#one {
   background-color: #FFF;
   width: 200px;
   max-height: 100px;
}
#two {
   background-color: #FFF;
   width: 200px;
   min-height: 300px
}

The first div will never grow more than 100px in height because max-height is set to 100px. The content does not fit in the div, so it continues beyond it.

The height of the second div is always at least 300px because min-height is set to 300px. In this example, the content does not fill the div.



<div id="one">
   <h3>max-height: 100px;</h3>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="two" >
   <h3>min-height: 300px;</h3>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

You can see the result below.

Two divs showing how the min-height and max-height properties affect the layout of divs

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
Reference
height

 

 

Show:
© 2014 Microsoft. All rights reserved.