Equal height

Purpose

Equalize the height of elements on the same baseline.

Example

Short container 1

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Medium container 1

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Long container 1

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Short container 2

Example text. Example text. Example text. Example text. Example text. Example text.

Medium container 2

Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text.

Long container 2

Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text.

Short container 3

Example text. Example text. Example text.

Medium container 3

Example text. Example text. Example text.

Different example text. Different example text.

Long container 3

Example text. Example text. Example text.

Different example text. Different example text.

Other example text. Other example text.

Code

HTML

<section id="simple">
	<h2>Example</h2>

	<div class="wb-eqht">
		<section>
			<h3>Short container 1</h3>
			...
		</section>
		<section>
			<h3>Medium container 1</h3>
			...
		</section>
		<section>
			<h3>Long container 1</h3>
			...
		</section>
		<section>
			<h3>Short container 2</h3>
			...
		</section>
		<section>
			<h3>Medium container 2</h3>
			...
		</section>
		<section>
			<h3>Long container 2</h3>
			...
		</section>
		<section>
			<h3>Short container 3</h3>
			...
		</section>
		<section>
			<h3>Medium container 3</h3>
			...
		</section>
		<section>
			<h3>Long container 3</h3>
			...
		</section>
	</div>
</section>

SCSS

#simple {
	.wb-eqht {
		section {
			border: 1px solid #ddd;
			border-radius: 4px;
			box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			box-sizing: border-box;
			display: inline-block;
			margin-bottom: 15px;
			padding: 15px;
			width: 100%;
		}
	}
}

.smallview,
.mediumview {
	#simple {
		.wb-eqht {
			section {
				width: 49%;
			}
		}
	}
}

.largeview,
.xlargeview {
	#simple {
		.wb-eqht {
			section {
				width: 33%;
			}
		}
	}
}

Nested Example

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test

Column 2

Column 2

  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test

Column 3

Column 3

  • test
  • test

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test

Code

<section>
	<h2>Nested Example</h2>

	<div class="row wb-eqht">
		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 1</h3>
				</div>
				<div class="panel-body">
					<p>Column 1</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 2</h3>
				</div>
				<div class="panel-body">
					<p>Column 2</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 3</h3>
				</div>
				<div class="panel-body">
					<p>Column 3</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 1</h3>
				</div>
				<div class="panel-body">
					<p>Column 1</p>
					...
				</div>
			</section>
		</div>
	</div>
</section>

Targeting a deeper nested elements

The following example do the same as if the hght-inhrt class was applied on the element to be equalize as well as all the parents (up to the child of wb-eqht) whereas eqht-trgt is only applied to the element to equalize (nothing needs to be done about the parents).

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test

Column 2

Column 2

  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test

Column 3

Column 3

  • test
  • test

Code

<div class="row wb-eqht">
		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 1</h3>
					</div>
					<div class="panel-body">
						<p>Column 1</p>
						...
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 2</h3>
					</div>
					<div class="panel-body">
						<p>Column 2</p>
						...
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-12 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 3</h3>
					</div>
					<div class="panel-body">
						<p>Column 3</p>
						...
					</div>
				</section>
			</div>
		</div>
	</div>

Special test case examples

Consult the special test case examples webpage

Date modified: