min-height

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value none
Inherited No
Applied To all elements except built-in elements and tables
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Description
It determines the minimum height of an element. Value of element height will be calculated depending on the determined parameters height, max-height and min-height. In tab. 1 it is shown what the browser applies in time of concurrent use of the specified properties.

Table 1. Element hight
Parameters values Height
min-height < height < max-height height
min-height > height > max-height min-height
min-height > height < max-height min-height
min-height < height height
min-height > height minheight
min-height > max-height min-height
min-height < max-height max-height

This table data means following: if height value (height) is less than value min-height the element height is accepted equal to the value min-height.

Syntax

min-height: value | none

Arguments
Pixels (px) and percent (%) are accepted as values. Value none removes all height restrictions

Example

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Cloverfield</title>
  <style type="text/css">
   #bottom {
    background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Background parameters */ 
    min-height: 80px; /* Min height */ 
    color: #E4BC96; /* Text color */ 
    padding: 5px 5px 5px 140px; /* Areas around the text */ 
   }
   #bottom p { margin: 5px 0; }
   #bottom a {
    color: #FFFDE0;
   }
  </style>
 </head>
 <body>
 
  <div id="bottom">
    <p>Site Cloverfield</p>
    <p><a href="info.html">Information about the site</a> <a href="author.html">About the author</a></p>
  </div>
 
 </body>
</html>

In this example for making the background image not cut at the top edge the min height is defined as 80 pixels. The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.minHeight