More than 3 years have passed since last update.

CSSでスマホのアドレスバーの高さに合うように実装する方法。100vhで困った人へ

Posted at 2021-05-13

スマホの画面上のURLが書いてある部分のせいで、heightを100vhにしても意図したデザインにならない問題を解決する方法の備忘録

解決方法は、javascriptのwindow.innerHeightを使用すること

var windowHeight=window.innerHeight;
document.getElementById('section').style.height=windowHeight+'px';

として、100vhでsectionの高さを設定するのではなく、window.innerHeightを使用することで、
アドレスバーの下から画面最下部の大きさで１画面となる。

こちらの記事がとてもわかりやすいです。
https://877.design/smartphone-height/