web関連
【javascript,css】スマホの下のバーを抜いた100vhの指定方法
100vhでメインビジュアルを指定したときにスマホのステータスバー？がせっかくのメインビジュアルに被ったので何とかならないかどうか調べた時の備忘録
参考
[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
まんま参考サイト通りで行けた
メインビジュアルをステータスバーを抜いた画面いっぱいに表示するためのコード
<style>
#main_visual{
height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
height:calc(var(--vh, 1vh) * 100);
}
</style>
<body>
<div id="main_visual">…</div>
<script>
// 最初に、ビューポートの高さを取得し、0.01を掛けて1%の値を算出して、vh単位の値を取得
let vh = window.innerHeight * 0.01;
// カスタム変数--vhの値をドキュメントのルートに設定
document.documentElement.style.setProperty('--vh', vh + 'px');
</script>
</body>
こんな感じで使うみたい
追記：2020年6月18日
IEで`${vh}px`を使おうとすると「文字が正しくありません」出たのでvh + 'px'に修正
「`(バッククォート)」を使う表現は「テンプレートリテラル」って呼ばれるECMAScript 6で使えるようになった構文みたい
+演算子を使わずに文字や数値、変数をくっつけることが可能
参考記事をまんまコピペばっかりしてると駄目だわ
こっからメモ
おまけ：カスタムプロパティ
var(--vh, 1vh)の--vhはカスタムプロパティと呼ばれるものみたい
cssの変数？って感じなのか？
/*グローバルな宣言*/
:root{
--color:red;
}
/*使用方法「var()」*/
.test2{
color: var(--color);
}こんなvar()関数と一緒に使うみたい
javascriptでアクセスする際はdocument.documentElement.style.setProperty('カスタムプロパティ名','代入したい値')って感じで使うみたい
setProperty()はカスタムプロパティ以外に
document.getElementById('main_visual').style.setProperty('height','100vh','');って使えるみたい( ..)φメモメモ
第三引数はimportantとか優先度を指定するみたい
CSS カスタムプロパティと JavaScript Event
カスタムプロパティってsassとかで使うもんだと思っていた
今度から使ってこ