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

豆カレー (ルー大盛り, 辛さ 70 倍)
前回の投稿 カリーライス専門店 エチオピア 本店 (No. 12 – 豆カレー 辛さ 50 倍) よりほぼ 1 年ぶりとなりました。その後 3 回程訪れた後は半年以上ブランクが開き、久しぶ
ソーキそば定食
うちなぁ料理と古酒家 ニライカナイ (手打ち生麺 沖縄そば定食) 以来、半年弱ご無沙汰していましたが、そろそろ体内の沖縄そばも切れたので、ふと訪れてみました。メール会員だと請福飲み放題 ? 気になりま
VAIO Fit 13A (背面)
hp dv5 has broken again and again で 5 年 3 ヶ月程愛用してきた hp dv5 の 5 回目の故障を機に、新たにノート PC を購入することにしました。初めてノー
Drive Network Philosophy
POP サーバプログラムもいくつか存在しますが、比較的マイナーなプログラムを使用しています。その名も popd と極めて汎用的な名称ですが /usr/ports/mail/popd/ に用意されていま
オードブル & サラダ
以前在籍していたスタッフとランチに繰り出す機会があり、いくつか見繕ってもらったお店のうち、ヌーベルダイニング グリーン を訪れてみました。ランチはハーフバイキングで、サラダ・スープ・ドリンクは食べ放題
石垣牛炙り握り
石垣島 (No. 2 – まかない屋) の続きです。軽めな量がらも気持ちは満たされた "まかない屋" を後にして 730 交差点に戻り、美崎町を中心に少し散策しました。
JTA961
かねてから最も行きたい沖縄の離島が与那国島でした。"Dr. コトー診療所" とそのロケ地巡りや海底遺跡がその最たる理由で、共感出来る人が出て来ても必ずしも同行出来るとも限らないしと
jQuery Logo
Internet Explorer でのブラウザチェックにおすすめのツールツール -> 開発者ツールで 7 – 9 の互換表示。レスポンシブ Web デザイン制作に便利な Firef
ドライブラック エクストラコールド
エクストラコールド BAR TOKYO 2013 (Part 1) の続きです。さて、いくつかおつまみもオーダーしてみます。初めて入るところでも慣れているところでも、まず枝豆を探してオーダーします。枝
かつぎや担々麺 + 辛さ 4 (大辛)
最近週末は "自宅 de タコライス" が続いたせいか、平日にもピリ辛なメニューを欲している気がしてなりません。以前私の中では日本一美味しいカレーだった "バルチックカレ
Valid HTML5 Valid CSS3 Another HTML Lint