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

jQuery Logo
Drive Network のホームページ では、CSS のみで何とか対応しましたが、まだ意図する 100% の動作ではありません。(そもそも入れ子が複雑)とあるサービス向けにまた同様の動作を実現させ
radserv ope 20
radserv ope (2.5" -> 3.5" No. 1) の続きです。3.5inch ハードディスクの固定と電源, SATA ケーブルを接続し、完了します。ハードディ
ミニストップ 沖縄フェア (1)
ミニストップで "沖縄フェア" を開催していて、カップ麺の沖縄そばやポテトチップス (タコライス味) 等をゲットされた方の写真が facebook 沖縄ユーザーグループ で目に付き
エクストラコールド
今年も エクストラコールド BAR が例年通りの場所で開催されていました。普段銀座に立ち寄る場所のすぐそばでもあります。この頃は平日は 17:00 からの開店と、外観も含めて例年通りでしたがふと気が付
WordPress Logo
WordPress をインストール後、記事の投稿や必要なプラグインを追加した後、どうしても気になり始めました。HTML ソースの汚さが。Drive Network のホームページ・オンラインサインアッ
波ぬ花 (5)
17:30 にスタートした 沖縄本島 (No. 48 – ルフージュ) でエンジンがかかった後は、同じく栄町通りそばの 波ぬ花 を訪れました。2 件目で 19:00 とは私には珍しい行動パ
川平湾 (23)
石垣島 (No. 8 ? 川平湾 Part 2) の続きです。日陰で波とたわむれてまったりした後は、スタート地点から左側 (方位は北) を目指してゆっくり散歩を始めました。着いた直後に川平公園入口で
チキンカレー (辛さ 5 倍)
御茶ノ水界隈は 20 年来自分にとっての庭な街ですが、以前から存在は知っていたけど未開拓なお店に カリーライス専門店 エチオピア がありました。沖縄出張 (No. 8 ? Havana CURRY)
東崎展望台 (2)
与那国島 (No. 11 – 海底遺跡) の続きです。朝食は滞在している 旅の館 阿檀 でいただいています。その際 "昨日はどこを周りましたか ?" という話になり、西
ミニストップ メニュー
数日前にオフィスからやや離れたミニストップの店頭に ベルギーチョコフェア のポスターが貼られていることに気が付きました。またあの ミニストップ (ベルギーチョコソフト) が帰って来る季節なのかと思いつ
Valid HTML5 Valid CSS3 Another HTML Lint