モバイル版で変な余白ができる問題です。pcから見ると下に余白ができないのにiphone safariで見ると下に余白ができてしまいます。chroomでも同じでした。 100vhの指定でモバイル版でスクロールができてしまいます。positionを消しても背景アニメーションを消しても変わらなかったので.containerのheightの指定で変な余白ができてるんだと思いますが解決方法がわかりません。 <style> .container { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; } .box { width: 80%; color: #000; border: 1px solid #000; border-radius: 40px; padding: 50px 20px; text-align: center; position: absolute; z-index: 1; background-color: #fff; } </style> <div class="container"> <div class="box"> <h1>メンテナンス中</h1> <div>ただいまwebサイトのメンテナンス中につき閲覧ができません。次回リニューアル日は2022年2月を予定しております。</div> </div> </div>