AndroidやiOS、PCやネットのちょっとした情報めも

Webページ内で高さが違う要素の高さを揃えてくれる便利なjQueryプラグイン

公開日 2017年4月3日カテゴリー プログラム

痒いところに手が届くような便利なjQueryのプラグインmatchHeight

スタイルシートでfloatを使って2カラムや3カラムなど複数列にしたとき、各カラムの内容量が違うことで高さが変わってしまうのが、matchHeightを使うことで横に並んだ高さ不揃いの各要素を簡単に揃えてくれる。

不揃いな高さの問題を解決する方法として、floatではなくFlexboxを使うことで高さを合わせられるのだが、FlexboxはInternet Explorer 8、9に対応していない。(flexibility.jsを利用すれば対応可)

IE 8、9はサポートが終了ということもあって仕方のないことなので、素直にFlexboxを使えばいいのだが、floatで作ったものをFlexboxに作り変えるのが面倒な場合にmatchHeightを利用すると便利です。
[ad#ads]
matchHeightにはいろいろと便利なオプション設定があり、その中でもスクロール位置がずれるのを解消する項目

$.fn.matchHeight._maintainScroll

は初期値False(無効)なのでTrue(有効)にしないと、ページの下のほうで更新したときにページの上部に移動してしまいます。

$(function(){
$.fn.matchHeight._maintainScroll = true;
});

タグ: ,
こちらの記事もオススメです
« 前の記事
次の記事 »

TOPへ
戻る