bodyの高さが足りない時に高さを調整する
コンテンツの要素量が少ない時にbodyの高さをブラウザの高さまで伸ばしてくれるjavascriptです。
javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | (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
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 | (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をつけています。
