---
{
	"title": "Égalisation des hauteurs",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Un plugiel d'égalisation des hauteurs réactif.",
	"tag": "equalheight",
	"parentdir": "equalheight",
	"altLangPrefix": "equalheight",
	"css": ["demo/equalheight"],
	"dateModified": "2023-07-17"
}
---
<section>
	<h2>Intention</h2>
	<p>Égaliser l'hauteur des éléments sur la même ligne de base.</p>
</section>

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

	<div class="wb-eqht">
		<section>
			<h3>Contenant à basse hauteur 1</h3>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</section>
		<section>
			<h3>Contenant à hauteur moyenne 1</h3>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
		</section>
		<section>
			<h3>Contenant à grande hauteur 1</h3>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
			<p>Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
		</section>
		<section>
			<h3>Contenant à basse hauteur 2</h3>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
		</section>
		<section>
			<h3>Contenant à hauteur moyenne 2</h3>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
		</section>
		<section>
			<h3>Contenant à grande hauteur 2</h3>
			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
			<p>Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
			<p>Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
		</section>
		<section>
			<h3>Contenant à basse hauteur 3</h3>
			<p>Exemple de texte. Exemple de texte.</p>
		</section>
		<section>
			<h3>Contenant à hauteur moyenne 3</h3>
			<p>Exemple de texte. Exemple de texte.</p>
			<p>Exemple de texte différent.</p>
		</section>
		<section>
			<h3>Contenant à grande hauteur 3</h3>
			<p>Exemple de texte. Exemple de texte.</p>
			<p>Exemple de texte différent.</p>
			<p>Autre exemple de texte. Autre exemple de texte.</p>
		</section>
	</div>

	<section>
		<h3>Code</h3>
		<section>
			<h4>HTML</h4>
			<pre><code>&lt;section id="simple"&gt;
	&lt;h2&gt;Exemple&lt;/h2&gt;

	&lt;div class=&quot;wb-eqht&quot;&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à basse hauteur 1&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à hauteur moyenne 1&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à grande hauteur 1&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à basse hauteur 2&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à hauteur moyenne 2&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à grande hauteur 2&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à basse hauteur 3&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à hauteur moyenne 3&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Contenant à grande hauteur 3&lt;/h3&gt;
			...
		&lt;/section&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>SCSS</h4>
			<pre><code>{{#escape}}{{#stripbanner}}{{> equalheight }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</section>
</section>

<section>
	<h2>Exemple imbriqué</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">Colonne 1</h3>
				</div>
				<div class="panel-body">
					<p>Colonne 1</p>
					<ul>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
					</ul>
				</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">Colonne 2</h3>
				</div>
				<div class="panel-body">
					<p>Colonne 2</p>
					<ul>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
					</ul>
				</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">Colonne 3</h3>
				</div>
				<div class="panel-body">
					<p>Colonne 3</p>
					<ul>
						<li>test</li>
						<li>test</li>
					</ul>
				</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">Colonne 1</h3>
				</div>
				<div class="panel-body">
					<p>Colonne 1</p>
					<ul>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
					</ul>
				</div>
			</section>
		</div>
	</div>
	<section>
		<h3>Code</h3>
		<pre><code>&lt;section&gt;
	&lt;h2&gt;Exemple imbriqué&lt;/h2&gt;

	&lt;div class="row wb-eqht"&gt;
		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;section class="panel panel-default hght-inhrt"&gt;
				&lt;div class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Colonne 1&lt;/h3&gt;
				&lt;/div&gt;
				&lt;div class="panel-body"&gt;
					&lt;p&gt;Colonne 1&lt;/p&gt;
					...
				&lt;/div&gt;
			&lt;/section&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;section class="panel panel-default hght-inhrt"&gt;
				&lt;div class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Colonne 2&lt;/h3&gt;
				&lt;/div&gt;
				&lt;div class="panel-body"&gt;
					&lt;p&gt;Colonne 2&lt;/p&gt;
					...
				&lt;/div&gt;
			&lt;/section&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;section class="panel panel-default hght-inhrt"&gt;
				&lt;div class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Colonne 3&lt;/h3&gt;
				&lt;/div&gt;
				&lt;div class="panel-body"&gt;
					&lt;p&gt;Colonne 3&lt;/p&gt;
					...
				&lt;/div&gt;
			&lt;/section&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;section class="panel panel-default hght-inhrt"&gt;
				&lt;div class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Colonne 1&lt;/h3&gt;
				&lt;/div&gt;
				&lt;div class="panel-body"&gt;
					&lt;p&gt;Colonne 1&lt;/p&gt;
					...
				&lt;/div&gt;
			&lt;/section&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
	</section>
</section>


<section>
	<h2>Exemple ciblé à un élément imbriqué plus profondément</h2>
	<p>l'exemple suivant fait la même chose que si la classe <code>hght-inhrt</code> serais utilisé à partir de l'élément à égaliser jusqu'à l'enfant immédiat de wb-eqht. Utiliser la classe <code>eqht-trgt</code> seulement sur l'élément à égaliser évite ces duplicatas.</p>
	<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">Colonne 1</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 1</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</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">Colonne 2</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 2</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</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">Colonne 3</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 3</p>
						<ul>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
	<section>
		<h3>Code</h3>
		<pre><code>&lt;div class="row wb-eqht"&gt;
		&lt;div class="col-sm-6 col-md-4"&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Colonne 1&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Colonne 1&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-4"&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Colonne 2&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Colonne 2&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-12 col-md-4"&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
					&lt;div class="panel-heading"&gt;
						&lt;h3 class="panel-title"&gt;Colonne 3&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class="panel-body"&gt;
						&lt;p&gt;Colonne 3&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;</code></pre>
	</section>
</section>

<section>
	<h2>Exemple d'essaie spéciale</h2>
	<p><a href="test-case-fr.html">Consulter la page d'exemple d'essaie spéciale</a></p>
</section>
