« 最大ダメージテスト | メイン | 東方文花帖 »

2005年07月01日

複数のBoxの高さを同期する [DOM]

要約

指定されたID群の中で、最大の高さを持つ要素に他の要素の高さを合わせます

用途・目的

テーブルを使用せずに floatプロパティや display プロパティ等によって擬似的な段組を実現する際、現在のCSSの実装ではそれらの高さを合わせるのが難しくなっています。

高さを固定長にすれば合わせることができますが、それではデザインサイズを固定しなければならなくなり、汎用性が高くありません。

ページのロード時に自動的に合わせるようにすれば、table 要素のような高さの等しいボックスを並べることができます。

スクリプト概要

  1. 指定されたIDリストの中で、高さが最大のものを選出
  2. 指定されたIDリスト全ての高さを、最大のものに合わせる

DOM未対応時の挙動

高さが合わないので、下がまちまちの長さになります。それぞれに背景が設定されている場合は、やや目立ちます。

コード

//----------------------------------------------------------
// ボックス要素の高さを同期
// 引数：同期するボックスの ID のリスト
//----------------------------------------------------------
function syncBoxHeight(){
  if(document.getElementById && document.documentElement.offsetHeight){
    var maxWidth = 0;

    // 高さの最大値を取得
    for(var i=0; i<syncBoxHeight.arguments.length; i++){
      var objNode = document.getElementById(syncBoxHeight.arguments[i]);
      if(objNode && objNode.offsetHeight > maxWidth){
        maxWidth = objNode.offsetHeight;
      }
    }

    // 高さを同期
    for(var i=0; i<syncBoxHeight.arguments.length; i++){
      var objNode = document.getElementById(syncBoxHeight.arguments[i]);
      if(objNode){ objNode.style.height = maxWidth; }
    }
    return 1;
  }
  return 0;
}

サンプル

今見ているページの左側メニューと日記領域は、この関数によって高さを同期しています。JavaScriptをoffにすると、高さが合わなくなるはずです。

導入方法

syncboxheight.txt

上記のファイルを拡張子を .js に変更してアップロード。その後、適用したいHTMLのヘッダ部分に以下のタグを記述してください。

<script type="text/javascript" src="syncboxheight.js" ></script>

投稿者 : 10:16 | コメント (2)

コメント

とても素晴らしい着眼点でさっそく試用させていただきました。
こちらで使った限りでは、mozilla、gecko系では機能しないようですが、やはりそうなのでしょうか？

投稿者 オジアド : 2006年07月20日 13:00

こんにちは、すごいですね！使わせていただきます！

IE6で、'return'ステートメントが関数の外側にあります。
というエラーが出てしまったのですが、どうすればこのエラーを回避できますか？

投稿者 やこ : 2009年03月24日 14:44

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)