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 ページでも十分に使用に耐えるでしょう。
