【CSS】height: 100vhでスマホ画面がグラグラする理由とその対処法

CSSで100vhと指定すると画面いっぱいの高さを指定することができますが、スマホ表示にするとアドレスバーによってグラグラしてしまいます。

今回はそのグラグラの対処法を紹介します。

 

height: 100vhでスマホ画面がグラグラする

height: 100vhと指定するとスマホのアドレスバーの表示・非表示によってブラウザの高さが変わってしまうため、グラグラしてしまいます。

そんな時は<html>と<body>にheight: 100%;を指定しましょう。

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

 

<html>と<body>にheight: 100%を指定すれば、アドレスバーを含めずに純粋な高さを取得できるようになります。

また、overflow: hiddenを指定するとスクロールバーも排除できるので、完全に1枚画面にすることができます。

 

内包のコンテンツの要素は必要に応じてheight: 100vhを指定すれば大丈夫でしょう。

スマホ画面がアドレスバーによってグラグラした場合は試してみてください。