こんにちは！CSSもはみ出るし社会からもはみ出そうです。Mizutani(@sirycity)です。ちなみにEXILEは日本語ではみ出しものです。

今日は癖のある100vhを扱いやすくするライブラリの紹介です。これがあれば100vh使い放題！

はじめに

このブログを始めて1年半になりますが、初期の初期に書いた以下のページが未だにアクセス数ダントツの1位です。

【CSS】100vhは「一画面」ではないという罠

いかに皆が100vhに困らされているかが分かりますね。

vhの概要

vhは端末画面の高さを100とした単位です。height: 100vhなら画面いっぱいに、50vhなら画面半分の高さになります。

これだけならvhは便利そうなんですが、vhにはとんでもねえ弱点があります。

それはスマホのアドレスバーに押し出されること。例えば高さ1000pxの画像に100vhを指定した画像を表示してもジャスト1画面になりません。アドレスバーが60pxくらいあるのでそのぶん押し出され、100vhを指定しても画面に表示されるのは(100vh - 60px)ぶんです。ふざけてるね。詳しくは上の記事で長々と愚痴ってるから見てね。

解決するライブラリ

でもそんな悩みとはもうおさらば。vhを本来のvhに戻してくれるライブラリがあるんです。

react-div-100vh

まずはreact用のライブラリ。react-div-100vhです。

react-div-100vh

ライブラリはいたってシンプル。height: (本来あるべき)100vhが設定された<div>を生成するだけです。こんだけ。

import Div100vh from 'react-div-100vh'

const fc = () =>
  <Div100vh>
    ここは本来あるべき100vh
  </Div100vh>

その他細かい機能も一応あるよ。↑のreadme参照。

vue-div-100vh

vueでも同じようなライブラリがあります。作者は全く別みたい。

vue-div-100vh

こっちも使い方はごく単純。

<template>
  <vue100vh :css="{height: '100rvh';}">
    ここは本来あるべき100vh
  </vue100vh>
</template>

<script>
import vue100vh from 'vue-100vh'

export default {
  components: { vue100vh },
}
</script>

reactと比べるとちょっとごちゃごちゃするけど、まあvueってこんなもんだしな。

さいごに

ごく単純なライブラリですが、私の中では神ライブラリです。スクロールを伴わないWebアプリ寄りの構成が役立ちそうですね！以上。