WEBデザイン・ホームページ製作 カンテナ

Divの高さを合わせるスクリプト

tableでは簡単な高さあわせだが、CSSレイアウトの場合なかなか難しく背景などが途中で切れてしまうことが多々ある。

もちろん大枠で囲んでやればいいわけだが、Javascriptを利用して高さそろえるのもありかも。

Javascriptサンプル

指定したIDで一番高いものにその他の高さを合わせます。

<script language="javascript" type="text/javascript">
//<![CDATA

    //左右コンテンツの高さあわせ（高いほうに）
    window.onload = function(){
    
        //高さ合わせるIDを指定
        var id = new Array("jsLeft", "jsCenter", "jsRight");
        var idHeight = new Array();
        
        //指定IDの高さを取得
        for(i=0; i<id.length; i++){
            idHeight[i] = document.getElementById(id[i]).offsetHeight;
        }
            
        //配列を昇順でソート
        idHeight.sort(    
                        function Func(a, b){//ソートのための比較関数
                            return (b - a);
                        }
                    );
        
        //一番高いのに合わせる
        for(i=0; i<id.length; i++){
            document.getElementById(id[i]).style.height = idHeight[0] + "px";
        }
                    
    }
//]]>
</script>

HTMLサンプル

<div id="jsHeight01">

    <div id="jsLeft">
        <h5>Javascript</h5>
        <p>Javascriptはクライアントサイドで動作するプログラムです。</p>
        <p>柔軟な言語のせいかいろいろな書き方があってわけわかりません。</p>
    </div>
	
    <div id="jsCenter">
        <h5>PHP</h5>
        <p>PHPはサーバサイドで動作するプログラムです。</p>
        <p>
        PHP5は本格的なオブジェクト指向言語となり、PHP4のサポートも2007年いっぱいで終了のようですので<br />
        PHP5に乗り換えたいのですが現在レンタルサーバはPHP5に対応しているところはあまりないので躊躇してしまいます。
        </p>
    </div>
	
    <div id="jsRight">
        <h5>MySQL</h5>
        <p>MySQLはデータベースです。</p>
    </div>
</div>

CSSサンプル

#jsLeft, #jsCenter, #jsRight {    
    float: left;
    width: 200px;
    padding: 5px;
}
#jsLeft {
    background-color: #CCCCCC;
}
#jsCenter {
    background-color: #000000;
}
#jsRight {
    background-color: #993300;
}

実行結果

IE7、Mac IE5.5、Firefox2.0.0.8、Netscape7.1で動作確認。問題はsafariで動かないこと(爆
とりあえずプロトタイプということで近いうちになんとか原因突き止めたいところですが・・・

どーもsortあたりが怪しいっぽい・・・

prototype.jsとscript.aculo.usによるリッチWebアプリケーション開発

著者 : 大澤 文孝 / 金額 : ￥ 2,940

kantenna.com 最新更新ページ

先月アクセスが多かったページ

• 1. javascript フォーム関連オブジェクトの取得
• 2. Photoshop チュートリアル 基本的な光の作り方
• 3. eclipse + PDT 2.0 + XAMPP で作るWordpress開発環境
• 4. jQueryによる表示、非表示切り替え
• 5. Dreamweaverで文字コードを変換する手順

トラックバック

• http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/386

[WEBプログラム覚書]2009年01月29日 17:00

Divの高さを合わせるスクリプト(safari対応版)

Divの高さを合わせるスクリプト(safari対応版)