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% の動作ではありません。(そもそも入れ子が複雑)とあるサービス向けにまた同様の動作を実現させ
野菜炒め + タコハッシュ (5)
久しぶりに自分で作った野菜炒めが食べたくなり、ふとキッチンのストックを見ると、先日差し入れでいただいた 【オキハム】タコハッシュ (ロングタコス) 75g と目が合いました。コンビーフハッシュとの組み
ザ・プレミアム・モルツ (3)
2014/11/25 発売開始の ザ・プレミアム・モルツ <初摘みホップ> は、普段飲んでいる ザ・プレミアム・モルツ を買いに行った際に偶然気が付きました。初めて見た時、SUNTORY
八重山そば (大) + 八重山飯
沖縄本島 (No. 6 – 打ち上げ) の続きです。05:00 頃までは起きていた気がしますが、普通通り目が覚めてお昼前にはお泊り宅を後にしました。この後半分はいつものメンバーとは離れても
つけ麺 (中) + 三田流餃子
三田製麺所 (辛つけ麺) から少し時間が空きましたが、訪れる時間が取れたので気になっていた餃子に挑戦してみることにしました。普通の餃子も良いですが、お好み焼き風な餃子がとても気になっていました。普通の
Drive Network Philosophy
FTP サーバプログラムはいくつか存在しますが、FreeBSD 付属の ftpd を拡張した BSDftpd-ssl の例を紹介します。FTP サーバに接続した際、サーバがクライアントに応答するメッセ
YASAI シャンプー & ヘアパック (3)
こなゆきコラーゲン でお世話になっている タマチャンショップ で、以前 タマチャンショップ (YASAI シャンプー & ヘアパック 3 日間体験セット) を試しました。YASAI シャンプー
Firefox Logo
linux-firefox 13 以降、17 までは問題なくアップデート出来ていました。ところが、18 からは以下の様なエラーメッセージとともに起動しなくなりました。XPCOMGlueLoad err
げんこつハンバーグ (オニオンソース)
先週の木・金曜日は、浜松で 3 ヶ月毎に開催されるリーダーミーティングと呼ばれる部課長会議があり、出席しました。静岡と言えば げんこつハンバーグの炭焼きレストランさわやか が相当有名だと聞いていました
やさいそば (大) + じゅうしぃ
古宇利島 (No. 1 – 古宇利大橋 〜 ハートロック) の続きです。翌日 09/21 (日) は再び 3 人での観光です。当初 09/21 に計画していた予定を 09/20 に前倒した
Valid HTML5 Valid CSS3 Another HTML Lint