min-height

The min-height property in CSS is used to set the minimum height of a specified element. Themin-height property always overrides both height and max-height. Authors may use any of the length values as long as they are a positive value.

.wrapper {
  height: 100%;     /* full height of the content box */
  min-height: 20em; /* Will be AT LEAST 20em tall */
}

.wrapper {
  height: 600px;
  min-height: 400px; /* Will be AT LEAST 20em tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}

<h1>Min-Height</h1>
<h3>Block Level Elements</h3>
<p class="min-height-px">Content in a paragraph : <code>height: 100% / min-height: 50px</code></p>

<p class="min-height-em">Content in a paragraph : <code>height: 100% / min-height: 8em</code></p>

<p class="min-height-percent">Content in a paragraph : <code>height: 100% / min-height: 50%</code></p>

<h3>Elements Nested</h3>
<div class="nesting example1">
  <p class="min-heightnested">Example#1 : Containing element : <code>height: 100px</code>.  Content in a paragraph : <code>min-height: 70%</code></p>
</div>

<div class="nesting example2">
  <p class="min-heightnested">Example#2 : Containing element : <code>height: 100%</code>.  Content in a paragraph : <code>height: auto</code></p>
</div>

<h3>Tables</h3>
<code>height: 100px; min-height: 500px;</code>
<table class="browser-support-table table-example1">
		<thead>
			<tr>
        <th>Height</th>
				<th class="chrome"><span>Chrome</span></th>
				<th class="safari"><span>Safari</span></th>
				<th class="firefox"><span>Firefox</span></th>
				<th class="opera"><span>Opera</span></th>
				<th class="ie"><span>IE</span></th>
				<th class="android"><span>Android</span></th>
				<th class="iOS"><span>iOS</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
        <td>100px</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
			</tr>
		</tbody>
	</table>

<code>height: 100%; min-height: 100px;</code>
<table class="browser-support-table table-example2">
		<thead>
			<tr>
        <th>Height</th>
				<th class="chrome"><span>Chrome</span></th>
				<th class="safari"><span>Safari</span></th>
				<th class="firefox"><span>Firefox</span></th>
				<th class="opera"><span>Opera</span></th>
				<th class="ie"><span>IE</span></th>
				<th class="android"><span>Android</span></th>
				<th class="iOS"><span>iOS</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
        <td>100%</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
			</tr>
		</tbody>
	</table>

//========================================
// Globals
//========================================

html {
  background: #e78629;
}

p {
  background: #212121;
  color: #FFF;
}

.nesting {
  background: white;
}

table {
  float: left;
  margin-right: .5em;
  background: white;
}


//========================================
// Min-Height Demo
//========================================


// $Block Level Elements
// =========================================

p.min-height-px {
  height: 100%;
  min-height: 50px;
}

p.min-height-em {
  height: 100%;
  min-height: 8em;
}

/**
* height value determined by 
* content and not these % values
*/
p.min-height-percent {
  height: 100%;
  min-height: 50%;
}


// $Elements Nested
// =========================================

// Example#1
.nesting.example1 {
  height: 100px;
  .min-heightnested {
    min-height: 70%; /* works because height is an absolute length value */
  }
}

// Example#2
.nesting.example2 {
  height: 100%;
  .min-heightnested {
    height: auto;
  }
}


// $Tables
// =========================================

// Example Left
.table-example1 {
  min-height: 500px;
  height: 100px;
}

// Example Right
.table-example2 {
  min-height: 100px;
  height: 100%;
}

If either value is greater (height > min-height or vice-versa), the value that is greatest will be the one rendered. The min-height property will apply to all elements except non-replaced inline elements, table columns, and column groups (i.e. colgroup, col ).

Related Properties

• height
• max-height

Browser Support