How to make header fixed even when keyboard is up on mobile web?

Question

I am making a web screen for mobile. I fixed the header as position:fixed , When the keyboard is raised, the header rises above the screen. How can I fix the header even when the keyboard is raised?

Answer 1

I've been facing this same problem, you can use window.visualViewport to get only the Viewport Height (minus Keyboard Height)

Answer 2

Here you go.

Just need to use position: fixed with a header.

 .main { position: relative; overflow-x: hidden; } body { overflow-x: hidden; margin: 0; padding: 0; } header { position: fixed; top: 0; left: 0; height: 50px; width: 100%; background: red; color: #fff; } main { margin-top: 50px; height: 100vh; width: 100%; background: green; color: #fff; } footer { height: 50px; width: 100%; background: yellow; color: #fff; }

 <div class="main"> <header>This is header</header> <main>This is main section</main> <footer>This is footer</footer> </div>