web関連

【javascript,css】スマホの下のバーを抜いた100vhの指定方法

2019/11/04

2019/11/02

/

【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>

こんな感じで使うみたい

こっからメモ

 

おまけ:カスタムプロパティ

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とかで使うもんだと思っていた
今度から使ってこ