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

海底遺跡 (3)
与那国島 (No. 10 – 居処屋どぅーらい) の続きです。翌朝は与那国観光の目的の 1 つである海底遺跡を訪れました。グラスボートやスノーケリング・ダイビングと方法がありますが、今回は
Firefox Logo
明け方散歩から帰って来て、開きっぱなしの facebook (Windows PC, Firefox) の見映えが変わっていました。等幅フォントに変わったというか、ビットマップフォントが無理矢理伸び縮
星空のポーター (2)
ガーリックチャーハン + コンビーフハッシュ (Part 2) で 1 ヶ月半ぶりに 銀座わしたショップ を訪れた際、見たことがないビールを見つけました。HELIOS と書かれているので、青い空と海の
サバ (5)
一昨日 いさば (日替りランチ 特大アジの開き) で大満足した 3 週間程前にも 日本一美味しいサバの塩焼き を食べに行っていました。珍しく 2 ヶ月も銀座を訪れていなかったのですが、CHANEL G
Facebook, WordPress Logo
Facebook 向けに OGP (Open Graph Protocol) に対応する方が望ましいとした場合、やはり Valid にはなりません。HTML5 + RDFa ? 等も考えられますが、発
Rack Sample 0
これは、Drive Network サービスを収容しているデータセンターのあるラックの一部です。白ケーブルはグローバル IP アドレス ネットワーク青はプライベート IP アドレス ネットワークライト
マルちゃん きしもと食堂 きしもとそば (1)
1 月末に facebook 沖縄ユーザーグループ で、きしもと食堂のきしもとそばをイメージしたカップ麺が限定発売されたと多数投稿されて来ました。きしもと食堂は 2 年前に 沖縄出張 (No. 17
魚河岸フライ定食 (2014/01/14)
記事では 築地食堂 源ちゃん (海老かき揚げとお刺身定食) から 1 ヵ月空いていますが、3 日後にまた訪れています。この日は 2013 年最後の出勤日で、取引先の方がご挨拶に来た後、ランチに同行いた
ビッグブレックファスト (2)
Google Analytics のトラフィック サマリーを見ていると、"マクドナルド スクランブルエッグ" というキーワードが目に付き始めると同時に、最寄りの 綾瀬店 のたれ幕に
Valid HTML5 Valid CSS3 Another HTML Lint