【css】heightに100vhを設定すると、スマホでアドレスバーの高さが含まれてしまう【スマホ】

hoge

１枚画面のページ（スクロール無しのファーストビューオンリーの全画面表示ページ。）を作成する時、bodyの高さを height: 100vh にすると便利。

ただし、iPhoneで見てみると、アドレスバーの関係でうまく高さを設定できない。orz

 

 

vhは、アドレスバーを含めた高さも取得してしまうので、アドレスバーの高さ分だけ上下にグラグラとしてしまう。

その挙句に、リサイズがかかったりする。

 

そんな時は初心に還ってこれ。

html,
body{
	width:100%;
	height:100%; /* ★大事なのは「100%」 */
	overflow:hidden; /* ★上の次に大事（必要に応じて） */
	margin:0;
	padding:0
	border:none;
}

 

htmlとbodyに「height:100%;」を設定すれば、
アドレスバーを含まない純粋な全画面高さが取得できる。

 

ついでに「overflow:hidden;」を設定すれば、スクロールバーも排除できて、完璧な１枚全画面となる。

 

内包のコンテンツ要素には、必要に応じて、 height:100vh すれば良い。

 

height:100%、まだまだ捨てたもんじゃない。