jQuery の matchHeight プラグインの使い方サンプル

/**
 * @file
 * .parent 内の . item の高さを揃える。
 */
$(function () {

  var $target = $('.parent .item');
  $target.matchHeight();

});

$target.matchHeight({target: $anotherTarget});

$target.matchHeight({remove: true});

/**
 * @file
 * メインとサイドバーの高さを合わせる（画面幅が広いときのみ）。
 */
$(function () {

  // 設定値
  var config = {
    // サイドバーがメインの横に配置される最小の画面幅
    widthThreashold: 1000,
    // メインとサイドバーのラッパー
    mainWrapper: '#main',
    sideBarWrapper: '.sidebar'
  };

  // 必要な jQuery オブジェクトを取得
  var $window = $(window),
      $body = $('body'),
      $sidebar = $(config.mainWrapper),
      $mainWrapper = $(config.sideBarWrapper);

  // ページロード時間の処理を実行
  init();

  /**
   * ページロード時の初期化処理を行う
   */
  function init() {

    // サイドバーの高さ調整を画面読み込み時に 1 度行う
    adjustSidebarHeight();

    // 画面リサイズ時にサイドバーの高さ調整が起こるようにする
    $window.resize(adjustSidebarHeight);
  }

  /**
   * サイドバーの高さを調整する
   *
   * 画面幅が広い（サイドバーがメインコンテンツの横に並ぶ）ときは
   * サイドバーの高さをメインにあわせる。
   * そうでない場合はサイドバーの高さ調整をリセットする。
   */
  function adjustSidebarHeight() {
    if (isWindowWide()) {
      $sidebar.matchHeight({target: $mainWrapper});
    }
    else {
      $sidebar.matchHeight({remove: true});
    }
  }

  /**
   * 画面幅が広いかどうか（サイドバーがメインの横につくかどうか）を調べる
   */
  function isWindowWide() {
    return $body.width() >= config.widthThreashold;
  }
});