[js] calcを使えない時にウインドウの高さを取得する！

JavaScript

2018.03.02

先日家に帰ったら流れていた「SING／シング」でMISIAが声優をしていてびっくりしたyanagimachiです。
あと長澤まさみの歌声初めて聞いたけど普通にうまかったです。
興味出た方は一度ぜひ！

さて、ウインドウの高さ-下付きの広告の高さのオーバーレイとか作りたいときって結構困ります。
HTMLや広告のCSSは以下のようなものとします。

//HTML
  <section class="block-overlay">
    <!-- overlay　ここの高さを指定したい -->
  </section>
  <aside class="block-ad">
    <!-- 下付きの広告 -->
  </aside>

//CSS 下付きの広告
.block-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background: rgba(#32a138, .9);　//SCSSのコード
}

calcが使えるときは簡単

calcを使って100%-50pxするだけです。

.block-overlay {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    height: calc(100% - 50px); //100% から50px引く
    background: rgba(#000, .8);　//SCSSのコード
}

デモ

calcが使えないときは？

Andorid4.4系（のアップデートされたものだけ？）とそれ以下ではcalcが使えないので、jsを使います。

calcの対応ブラウザ

考え方としてはウインドウの高さを取得して、広告エリアの50pxを引きます。
とすると「$(window).height() - 50」でいいのでは？と思うのですが、ここで２つほど問題があります。

一部のブラウザではにスクロールバーなどの幅が加味されない
iPhoneのSafariではアドレスバー（URLバー）の高さなどが加味されない

簡単に行くかな〜と思ったのですが、結構厄介です。
そこで「window.innerHeight」を使います。

//js
  $(window).on('load resize', function(){ //読み込みかリサイズしたとき
    //.block-overlayの高さをウインドウの高さ-50pxにする
    $('.block-overlay').css('height', window.innerHeight - 50);
  });