Home » Program » div タグを使ったカラムの高さを揃えるスクリプト (Tag: )

Drive Network のホームページ では、CSS のみで何とか対応しましたが、まだ意図する 100% の動作ではありません。(そもそも入れ子が複雑)

とあるサービス向けにまた同様の動作を実現させたく、色々探しました。CSS3 の display: box; はあまりいい感じがしない (webkit や mozilla 向けと結局すべて個別設定が必要な点が美しくない) ので、行きついたところが jQuery のプラグインでの処理でした。

jquery.flatheights.js を始め、複数のプラグインを試しましたが、

  • padding を無視しているのか、余計な余白がついて高さが揃う
  • プラグイン側のお仕着せのクラス名や ID のセレクタが必要なタイプは汎用性に欠けるので却下

した結果、一番まともな動作で軽量だった heightLine.js を参考にしつつカスタマイズしました。

function ChangeHeight(tag, id) {
    var obj0 = document.getElementsByTagName ? document.getElementsByTagName(tag) : document.all.tags(tag);
    var obj  = [];

    for (var i = 0; i < obj0.length; i++) {
        if (obj0[i].id == id) {
            obj.push(obj0[i]);
            break;
        }
    }

    ChangeBox = function() {
        for (var i = 0; i < obj.length; i++) {
            var max = 0;
            var cn  = obj[i].childNodes;

            for (var h = 0; h < cn.length; h++) {
                if (cn[h] && cn[h].nodeType == 1) {
                    cn[h].style.height = 'auto';
                    max = (max > cn[h].offsetHeight) ? max : cn[h].offsetHeight;
                }
            }

            for (var h = 0; h < cn.length; h++) {
                if (cn[h].style) {
                    var style  = cn[h].currentStyle || document.defaultView.getComputedStyle(cn[h], '');
                    var height = max;

                    if (style.paddingTop) {
                        height -= style.paddingTop.replace('px', '');
                    }

                    if (style.paddingBottom) {
                        height -= style.paddingBottom.replace('px', '');
                    }

                    if (style.borderTopWidth && style.borderTopWidth != 'medium') {
                        height -= style.borderTopWidth.replace('px', '');
                    }

                    if (style.borderBottomWidth && style.borderBottomWidth != 'medium') {
                        height -= style.borderBottomWidth.replace('px', '');
                    }

                    cn[h].style.height = height + 'px';
                }
            }
        }
    }

    ChangeBox();
    window.onresize = ChangeBox;
}

呼び出す時は例えば ChangeHeight(‘div’, ‘main’); とします。HTML 側は

<div id="main">
  <div id="menu">

  </div>

  <div id="content">

  </div>
</div>

の様な場合、

  • menu, content の高さが Web ブラウザの縦幅に追随して広がりつつ揃う
  • 一度広げた高さは Web ブラウザの縦幅を縮めても縮小せずスクロールバーが表示

します。Web アプリケーション向けの動作を前提としていますが、静的な Web ページでも十分に使用に耐えるでしょう。

Random Select

チキンカレー
沖縄出張から帰った後、改めて "欧風カレー" ってどういう定義でどんな作り方が一般的なのだろう、と興味を持って調べてみたところ、何と 欧風カレー ボンディ のレシピが公開されている
Drive Network Core (WS-C3750E-48TD-E)
現在の Drive Network のスタイルを 2004/01 から担当。Drive the Future のキャッチコピーの元、お客様のビジネスを支援する IT サービスの提供を続けています。舞台
ピザ (中)
沖縄出張 (No. 29 – 伊江島 -> NG) で瀬底島から伊江島を眺めた後、少し早いかと思いつつ ピザ喫茶 花人逢 に移動しました。11:00 オープンと勘違いしていて 10:
あらびき牛肉メンチカツ
休日のお昼ご飯はご飯だけ自宅で炊いて、駅前のイトーヨーカドーや 東急ストア の惣菜を買って済ませるパターンもあります。真夏以外はみそ汁も作ります。セブンイレブン (おつまみセット) でご紹介した通り、
もも ? (4)
10/09 から開始した本来の沖縄出張で、土・日を迎えることになりました。かねてからチームの K 君の飼い猫 "もも" に会ってみたいと思っていました。沖縄にも猫カフェがいくつかあ
BACAR OKINAWA (1)
昨年のゴールデンウィークは シリーズ (石垣島) の通り石垣島・黒島を堪能しましたが、今年は本島でのんびりすることにしました。沖縄出張 (No. 30 ? 花人逢) で自分にはかなり好みのピザに出会っ
生姜焼き定食
My Select "日本一シリーズ" 第 4 弾で真打ち登場。日本一美味しい黒豚餃子 よりも前から、それこそ確実に 20 年近く通い続けている とちぎや をご紹介。一時期お茶の水
Logicool Ultrathin Touch Mouse T630 (5)
VAIO Fit 13A + Logicool Ultrathin Touch Mouse T630 (Part 1) の続きです。取扱説明書通り、Bluetooth 接続を済ませます。Logicoo
かつぎや担々麺 + 辛さ 4 (大辛)
最近週末は "自宅 de タコライス" が続いたせいか、平日にもピリ辛なメニューを欲している気がしてなりません。以前私の中では日本一美味しいカレーだった "バルチックカレ
ネストビール ペールエール
先日プレゼントに常陸野ネストビールを数本いただきました。製造元 木内酒造 は初めて聞いた名前ですが、調べるとビール製造は 1996 年からでも清酒では 180 年近い歴史を持つ老舗です。木彫りを思わせ
Valid HTML5 Valid CSS3 Another HTML Lint