[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height

指定したエリア内だけ、複数のエリアそれぞれに適用することも可能なパネルの高さを同じにするスクリプトを紹介します。

↓こんな感じに1行目と2行目で高さを揃えたり、全て同じにすることも簡単です。

デモのキャプチャ

Right Height -GitHub

Right Heightのデモ

デモのキャプチャ

デモページ

デモページがシンプルすぎるので、いろいろなケースを試してみました。
ダミーテキスト: 日本語と英語の組見本用のダミーテキスト配布サイトのリンク集

高さを揃えるエリアと要素を指定できる

Right Heightの特徴の一つはエリアを複数設定でき、それぞれで高さを揃えられることです。

デモのキャプチャ

1-3、4-6で、エリアを指定

エリア内で適用する要素を指定することもできます。

デモのキャプチャ

7は無指定、8-9は高さを揃える

レスポンシブ対応

パネルの幅が狭くなったり、縦一列に配置されても、期待通りの動作をします。

デモのキャプチャ

幅が狭くなっても、高さは一緒

スマホなどで、縦一列に配置された際には、成り行きになります。

デモのキャプチャ

縦一列時には、成り行き

複数の行にも適用できる

高さを揃えるのは一行内だけでなく、複数の行に渡って揃えることもできます。

デモのキャプチャ

1-6でエリアを指定、1-6が同じ高さに

デモのキャプチャ

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに

Right Heightの使い方

Step 1: スクリプトの準備

当スクリプトを外部ファイルとして記述し、初期化しておきます。
スクリプトは、これで完了。

<body>
  ...
  コンテンツ
  ...
<script src="js/right-height.js"></script>
<script>
  rightHeight.init();
</script>
</body>

Step 2: HTML

HTMLのポイントは、2つ。

data-right-height
適用するエリアを指定
data-right-height-content
適用する要素を指定
<div class="row" data-right-height>
    <div class="grid-third" data-right-height-content>
        1. 高さを揃える
    </div>
    <div class="grid-third" data-right-height-content>
        2. 高さを揃える
    </div>
    <div class="grid-third">
        3. 高さを揃えない
    </div>
</div>

「data-right-height-content」を指定した要素は高さを揃え、指定していない要素は成り行きになります。

top of page

©2017 coliss