bodyの高さが足りない時に高さを調整する
コンテンツの要素量が少ない時にbodyの高さをブラウザの高さまで伸ばしてくれるjavascriptです。
javascript
(function() {
var wh = window.innerHeight;
var body_h = document.body.clientHeight;
var header = document.getElementsByClassName('l_header');
var footer = document.getElementsByClassName('l_footer');
var content = document.getElementsByClassName('l_content');
//もしウィンドウ縦サイズがbody縦サイズよりも大きかったら
if (wh > body_h) {
//l_contentに効かせたい最小縦サイズ = ウィンドウ縦サイズ - l_header縦サイズ + l_footer縦サイズ
var content_h = wh - (header[0].clientHeight + footer[0].clientHeight);
//アコーディオンする要素などがあった場合を考慮してheightではなくmin-heigthを効かせる
content[0].style.minHeight = content_h + 'px';
} else {
//小さいなら何もしない(スクロール可なら何もしない)
}
}());
前回のエントリ「追従するものがある時に高さを調整する」と組み合わせるとこんな感じ
デモページ
javascript
(function() {
var header = document.getElementsByClassName('l_header');
var content = document.getElementsByClassName('l_content');
var footer = document.getElementsByClassName('l_footer');
var fixed = document.getElementsByClassName('fixed_bottom');
if (fixed.length > 0) {
var fixed_h = fixed[0].clientHeight;
}
var wh = window.innerHeight;
var body_h = document.body.clientHeight;
//bodyの高さが足りないときに高さを調整する
var body_fix = function() {
var content_h = wh - (header[0].clientHeight + footer[0].clientHeight);
if (wh > body_h) {
content[0].style.minHeight = content_h + 'px';
}
};
//fixed-bottomが存在する時に高さを調整する
var bottom_fix = function(call) {
if (fixed.length > 0) {
footer[0].style.paddingBottom = fixed_h + 'px';
}
call();
};
//bottom_fix()の処理をした後にbody_fix()を呼ぶ
bottom_fix(body_fix);
}());コールバックでbottom_fixを呼んだ後にbody_fixを呼んでいます。
こちらではリサイズした時のためにl_contentの高さに関係なくfooterにpaddingをつけています。
