CodePen

HTML

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

↑ Insert the most common viewport meta tag

CSS

            
              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%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................