即使键盘在移动网络上打开，如何使标题固定？

Question

我正在为移动设备制作一个网页屏幕。我将标题固定为position:fixed，当键盘抬起时，标题会升到屏幕上方。即使键盘抬起，如何固定标题？

Answer 1

干得好。

position: fixed只需与标头一起使用即可。

.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>