背景に色を付けてるときとかにほしい。
やりたいことのイメージ
こんなのがあったとする。
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>で、ブラウザの高さが1000px、<header>が100px、<main>が400px、<footer>が300pxだったとする。
ページ内のコンテンツの高さはブラウザの高さより少ないので、コンテンツの下に隙間ができる。
<footer>に背景色をつけていたとすれば、<footer>の下に真っ白な余白ができるということになる。
ダサい。
ページの最下部が<footer>になるように、<footer>の下に余白ができないように、したい。
コンテンツの厚みが増せるのであればいいんだけど、増やせないとしたら。
とりあえず<main>の高さを伸ばして帳尻を合わせましょうぜ、という話。
こんな感じ
上記と同じでこんな感じに組んだとする。
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>ブラウザの高さから<header>と<footer>の高さを引いた値を<main>にmin-heightを与えて、不足分を補う。min-heightであれば、コンテンツを増やすギミックを入れたとしても邪魔しない。
$(window).on('load resize',function(){
let browserHeight = document.documentElement.clientHeight; //ブラウザの高さ
let pageHeight = $('body').outerHeight(); //ページ全体の高さ
if(pageHeight <= browserHeight){ //ページの中身がブラウザ内に収まるなら
let headerHeight = $('header').outerHeight(); //headerの高さ
let footerHeight = $('footer').outerHeight(); //footerの高さ
let mainMinHeight = browserHeight - headerHeight - footerHeight; //mainに与えたい高さ
$('main').css('min-height', mainMinHeight+'px');
}
})閲覧時の状況を踏まえて、読み込み時だけでなくブラウザの幅が変わったときにも発火するようになってる。
一応ページの高さがブラウザの高さより短ければ、って条件をつけてるけど、そもそもこれ自体必要になる状況は結構限られるだろうから、コンテンツが少ない特定ページでだけ発火させるように、そもそも適用するページを指定したほうが良いかなと思う。
基本的にブラウザの高さは変わらないけど、PC表示でサイズ変更すると高さが変わる。スマホを縦横動かすことは稀も稀だし無視していいレベルだけど、PC表示であればコンテンツの高さ以上をキープしつつブラウザの高さが短くなる状況は普通にある。
だから、条件分岐を付けずに常時発火させても良いように思う。
今回は<main>にmin-heightをつけてるんだけど、<footer>につけたい人もいるかも知れない。まあそのへんは好きにしてください。
変えたい所
「ページの高さがブラウザの高さより少なければ」って条件が付けられたら良いんだけど、一番最初のjs発火前以外はプレーンな値を取得することができないので、厳密な条件は最初の1回だけとなる。
だってmin-heightを与えたからで、再取得できるのはjs適用後の高さになってしまう。
だから発火してしまえばmin-heightを増やすことができても減らすことはできない。
「ページの高さがブラウザの高さに収まる範囲で増えた場合」に無力、つまり「なんかちょっとページが伸びてるんだけど」ということが起きる。
完全に対応したいなら一旦付与したmin-heightを削除して、プレーンな状態を取得しなきゃいけない。
だけどそんなことをしたら画面がガクガクするので気持ち悪いったらない。
どうにかしたいけどどうしたら良いですかね。
そもそもの話として、こんな状況になるような内容の少ないページを作らないとか、なってもいいようなデザインでやっていきたいですね。
コメント