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

hp dv5
メーカー保証に見放されながらも hp dv5 revival で見事に復旧したので、せっかくですから Windows 8.1 がインストール出来るか検証してみることにしました。Windows Vist
iPhone 6 Plus (Gold)
iPhone 6 Plus (自動大文字入力・自動修正 オフ) の続きです。ARROWS X F-10D (No. 1) では消しても消してもよみがえるゾンビアプリが多いので、頻繁にアプリ (プロセス
三鷹の森ジブリ美術館 (10)
三鷹の森ジブリ美術館 (Part 1) の続きです。屋上庭園に上がると、天空の城ラピュタ のロボット兵がすぐに見えました。この日は 3 連休でもあってすごい人手でした。妙に韓国人か台湾人と思える方が多
Mixed Fruit
始めるにあたって、ドローイン vs ロングプレス あたりから昼食も意図的にボリュームダウンして 2kg は落していました。が、前々から気になっていた断食ダイエットとも言われるファスティングダイエットに
絆道 (2)
2014/04 頃から facebook 沖縄ユーザーグループ に自ら投稿する様になり、翌 5 月中旬にはとても気の合う友達が出来ました。非公開のグループを作成して沖縄に関すること以外でも語り合う中で
Drive Network Philosophy
6 回に分けて説明した "Drive Network のこだわり" シリーズは、2 年程前に浜松・沖縄の Drive Network に直接関わっていないスタッフに向けたサービス説
v
ここ数年は週末に自宅で 350ml または 500ml 缶を 2 缶前後空けるクセがついています。ビールは ザ・プレミアム・モルツ が一番のお気に入りですが、以前から本体にシールが貼られていました。あ
コントロールパネル (更新後)
今回は Windows の話ですが、Firefox を 13.0.1 の最新版に更新した後、ふと気が付くと YouTube の動画が再生出来なくなる現象に出くわしました。INTERNET Watch
豚肉生姜焼定食 (ライス 大)
柏や (アジフライカレー) の続きです。さて、今日もデータセンターで頭脳 + 肉体が半々な長丁場の日です。朝起きると、大分アジフライ定食に気持ちが傾きつつありましたが、前日の自分との約束を果たさない訳
Valid HTML5 Valid CSS3 Another HTML Lint