height

The height property in CSS defines specifies the content height of boxes and accepts any of the length values. The “content” area is defined as the padding, border, and margin of the element. Negative values like height: -100px are not accepted. The height property does not apply to non-replaced inline elements including table columns and column groups.

.wrap {
  height: auto;    /* auto keyword */

  height: 120px;   /* length values */
  height: 10em;
  height: 0;       /* unit-less length is OK for zero */

  height: 75%;     /* percentage value */

  height: inherit; /* inherited value from parent element */
}

<h1>Height Property</h1>
<h3>Block Level Elements</h3>
<p class="heightpx">Content in a paragraph : <code>height: 100px</code></p>

<p class="heightem">Content in a paragraph : <code>height: 8em</code></p>

<p class="heightpercent">Content in a paragraph : <code>height: 100%</code></p>

<h3>Elements Contained</h3>
<div class="nesting example1">
  <p class="heightnested">Containing element : <code>height: 100px</code>.  Content in a paragraph : <code>height: 100%</code></p>
</div>

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

<h3>Table Height</h3>
<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>

<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-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>

html {
  background: #e78629;
}

//========================================
// Height Demo
//========================================


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

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

p.heightpx {
  height: 100px;
}

p.heightem {
  height: 8em;
}

p.heightpercent {
  height: 100%; /* height value determined by content */
}


// $Elements Contained
// =========================================

.nesting {
  background: white;
}

.nesting.example1 {
  height: 100px;
  .heightnested {
    height: 100%; /* fills the available space of the containing parent element*/
  }
}

.nesting.example2 {
  height: 100%;
  .heightnested {
    height: auto; /* fills the available space of the containing parent element*/
  }
}


// $Table Height
// =========================================

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

.table-example1 {
  height: 100px;
}

.table-example2 {
  height: 100%;
}

If the height of the containing block is not specified explicitly, and the element is not absolutely positioned, the value of its height computes to auto (it will be as tall as the content inside it is, or zero if there is no content). If the elements content portion requires more vertical space than available from the value assigned, the elements behavior is defined by the overflow property.

When using the keyword auto, height is calculated based on the elements content area unless explicitly specified. This means a value based on a percentage is still that of the elements content area. Similarly, if the height of the container is set to a percentage value, a child elements percentage height is still based on the content area of that child element.

Height can also be used as an animatable property.

Related Properties

• min-height
• max-height

Browser Support

IE7 doesn’t support “inherit” as a value.