EqualHeight.jsは複数カラムの縦幅を揃えてくれるjQueryプラグインです。
レスポンシブにも対応していてとっても便利です！
基本的な使い方
常に特定のカラムの高さを揃えたい場合は、以下のように使います。
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.equalheight.min.js"></script>
<script>
$(document).ready(function () {
$('.column2 p').equalHeight(); //高さを揃えたい要素を指定
});
</script>
css
.column2 {
width: 100%;
overflow: hidden;
}
.column2 div {
float: left;
width: 50%;
}
.column2 div p{
margin: 10px;
padding: 10px;
background: #FCCDE4;
}
複合的な使い方
上の段はずっと2カラムのままで、下の段は横幅639px以下は1カラム、640px以上は2カラム、800px以上は4カラムになるようにしています。
こちらの方法でIE7,8に対応する方法は見つからなかったので、その場合はこちらの記事をご参考ください。
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.equalheight.min.js"></script>
<script>
$(document).ready(function () {
//上の2カラムの高さ揃え
$('.column2 p').equalHeight(); //高さを揃えたい要素を指定
//下の4カラムの高さ揃え
var equalHeight = $('.column1-2 p').equalHeight({wait: true});
// Browser supports matchMedia
if (window.matchMedia) {
// MediaQueryList
var mql = window.matchMedia("(min-width: 640px)"); //このサイズ以上で高さ揃えを行う
// MediaQueryListListener
var equalHeightCheck = function (mql) {
if (mql.matches) {
equalHeight.start();
} else {
equalHeight.stop();
}
};
// Add listener
mql.addListener(equalHeightCheck);
// Manually call listener
equalHeightCheck(mql);
}
// Browser doesn't support matchMedia
else {
equalHeight.start();
}
});
css
.column2 {
width: 100%;
overflow: hidden;
}
.column2 div {
float: left;
width: 50%;
}
.column2 div p{
margin: 10px;
padding: 10px;
background: #FCCDE4;
}
.column1-2 {
width: 100%;
overflow: hidden;
}
.column1-2 div p {
background: #ddd;
margin: 10px;
padding: 10px;
}
@media (min-width: 640px) {
.column1-2 div {
width: 50%;
float: left;
}
}
@media (min-width: 800px) {
.column1-2 div {
width: 25%;
float: left;
}
}
