複数カラムの高さをjQueryとJavaScriptを使って最も高い高さにあわせる方法です。
変数m_hにJavaScriptのMath.max(引数)を使って引数の中で最も高い値の数値を代入します。
引数には、jQueryを使って各カラムの高さの値を取得したものを渡します。
デモでは、レスポンシブに対応するため関数を変数にして、最初の表示とリサイズ表示の両方で同じ関数を読み込むようにしています。
リサイズ表示の際にその前に指定されたheight値を無効にするため、最初に.css()を使ってheight値をautoにしてリセットしています。
関連リンク：MDN Math.max()
<!--HTML-->
<div>Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
<div>Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. </div>
<div>Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div>
<!--CSS-->
div {
background: #eee;
border: 1px dotted;
float: left;
margin: 1%;
padding: 2%;
width: 24%;
}
<!--JavaScript-->
$(function(){
var m_h_fn = function(){
$('div').removeAttr('style');//height reset
var m_h = Math.max(
$('div:eq(0)').height(),
$('div:eq(1)').height(),
$('div:eq(2)').height()
);
$('div').height(m_h);
}
$(window).load(m_h_fn).resize(m_h_fn);
});
See the Pen jq: Align the heights by nwstcode (@nwst) on CodePen.
