Drive Network のホームページ では、CSS のみで何とか対応しましたが、まだ意図する 100% の動作ではありません。(そもそも入れ子が複雑)
とあるサービス向けにまた同様の動作を実現させたく、色々探しました。CSS3 の display: box; はあまりいい感じがしない (webkit や mozilla 向けと結局すべて個別設定が必要な点が美しくない) ので、行きついたところが jQuery のプラグインでの処理でした。
jquery.flatheights.js を始め、複数のプラグインを試しましたが、
- padding を無視しているのか、余計な余白がついて高さが揃う
- プラグイン側のお仕着せのクラス名や ID のセレクタが必要なタイプは汎用性に欠けるので却下
した結果、一番まともな動作で軽量だった heightLine.js を参考にしつつカスタマイズしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 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 側は
1 2 3 4 5 6 7 8 9 | <div id="main"> <div id="menu"> </div> <div id="content"> </div></div> |
の様な場合、
- menu, content の高さが Web ブラウザの縦幅に追随して広がりつつ揃う
- 一度広げた高さは Web ブラウザの縦幅を縮めても縮小せずスクロールバーが表示
します。Web アプリケーション向けの動作を前提としていますが、静的な Web ページでも十分に使用に耐えるでしょう。
