はじめに
body {
min-height: 100vh;
}
※コメントいただきました。↑この記述のみでOKです。
これがうまくいかない方は
「--watchによるCSSファイルの変更共有」や
「コンパイルがうまくいってるか」を確認してください
（私はこれをミスりました）
以下、読む価値なし
document.bodyは、必ずしもページ全体をラップできるわけではないようです。
例えば、コンテンツが少ない場合は document.body（以下body）はページの半分ほどになってしまいます。
 |
水色の部分がbody（background-colorで色付け） |
| 「スワイプでタブ切り替え」を設定したい時 水色部分はスワイプに反応するが、白部分はスワイプに反応しない |
こうなると、body を使って、ページ全体にイベントを設定することができなくなります。
解決方法
const setBodyHeight = () => {
document.body.style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', setBodyHeight);
window.addEventListener('load', setBodyHeight);
このようにwindow.innerHeightを取得し、document.bodyのheightに設定することで、ページの高さぴったりにbodyを設定できました。
resize / load 時に発火させることで、ページを開いた時・再読み込みした時・リサイズした時に高さを合わせることができます。
 |
bodyがページ全体の高さになった |
余談：windowに対するイベント設定
今回はHammer.jsを使用しましたが、少なくとも調べた限りではwindowに対しイベントを設定することはできませんでした。bodyの高さを調整することが大切ですね。
個人的な感覚でも、windowはグローバルオブジェクトかつ、HTML要素ではないためイベント設定対象としてはふさわしくないと思います。
間違ってたら / 他にやり方があったら教えてください。
おわりに
以上、bodyの高さをぴったりにする方法でした。
次は何を書こうかしら・・・