【JS】100vhはみ出る問題を解決するライブラリdiv-100vhについて
こんにちは!CSSもはみ出るし社会からもはみ出そうです。Mizutani(@sirycity)です。ちなみにEXILEは日本語ではみ出しものです。
今日は癖のある100vhを扱いやすくするライブラリの紹介です。これがあれば100vh使い放題!
はじめに
このブログを始めて1年半になりますが、初期の初期に書いた以下のページが未だにアクセス数ダントツの1位です。
いかに皆が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です。
ライブラリはいたってシンプル。height: (本来あるべき)100vh
が設定された<div>を生成するだけです。こんだけ。
import Div100vh from 'react-div-100vh'
const fc = () =>
<Div100vh>
ここは本来あるべき100vh
</Div100vh>
その他細かい機能も一応あるよ。↑のreadme参照。
vue-div-100vh
vueでも同じようなライブラリがあります。作者は全く別みたい。
こっちも使い方はごく単純。
<template>
<vue100vh :css="{height: '100rvh';}">
ここは本来あるべき100vh
</vue100vh>
</template>
<script>
import vue100vh from 'vue-100vh'
export default {
components: { vue100vh },
}
</script>
reactと比べるとちょっとごちゃごちゃするけど、まあvueってこんなもんだしな。
さいごに
ごく単純なライブラリですが、私の中では神ライブラリです。スクロールを伴わないWebアプリ寄りの構成が役立ちそうですね!以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介