当键盘打开HTML / CSS时，页脚被向上推？

Question

因此，我在这里要做的就是向我的网站添加一个简单的页脚，该页脚在台式机上打开时可以正常运行，但是在平板电脑或移动设备上，只要打开键盘（例如登录），页脚就会向上移动到键盘上方。有解决这个问题的方法吗？

的CSS

#footer {
  width: 100%;
  background-color: #4c66a4;
  color: #fff;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
}

<div id="footer">
  <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>

Answer 1

尝试在body标签内使用包装纸。

html,body{
  height:100%;
}
.wrapper {
    min-height: 100%;
    position: relative;
  padding-bottom:90px; /* footer's height */
}
#footer {
  width: 100%;
  background-color: #4c66a4;
  color: #fff;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
}

<div class="wrapper">
<main>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis necessitatibus earum tenetur itaque ducimus atque nam vitae ab non quasi natus quam, cum hic quod possimus quibusdam inventore minima temporibus.</div>
  <div>Optio inventore delectus quas rerum mollitia eum, repellendus voluptatum! Quos, quas nobis delectus, ipsa tempore reiciendis dolore numquam sequi tempora, nostrum in mollitia laboriosam odio labore voluptatem sint. Similique, aliquam.</div>
  <div>Sapiente quisquam vitae alias in nesciunt numquam id, distinctio! Doloribus error mollitia, optio debitis ratione quaerat maiores odio nostrum autem commodi tempora magnam, quos necessitatibus nobis aperiam consequuntur perspiciatis deserunt.</div>
  <div>Hic facere nam aliquam tenetur officiis, ratione, sunt aliquid perspiciatis distinctio laborum perferendis nisi ullam omnis incidunt, quasi illo corrupti, dolores eius vero ipsum tempore. Tempora consequatur necessitatibus, saepe assumenda.</div>
  <div>Eveniet, odit deleniti neque voluptates soluta architecto, quae aspernatur aut minima rerum itaque nobis distinctio ex culpa! Dolore sit vel mollitia aspernatur distinctio voluptatibus! Iste perspiciatis, aliquid a doloribus et.</div>
  <div>Molestias, ducimus! Magni doloribus fugiat praesentium dolore minus perferendis, reprehenderit voluptatibus fuga, rerum quam eveniet, odit ut eaque, repellat provident aperiam repudiandae. Quos porro eveniet, dignissimos non quibusdam provident eligendi!</div>
  <div>Ducimus unde ea iste alias fugiat debitis natus illo eligendi! Nisi dolor esse totam optio, tenetur distinctio, sequi inventore eaque iure earum suscipit quam ipsam qui quae molestias id expedita!</div>
  <div>Veritatis delectus, in laudantium. Excepturi, deserunt! Ullam voluptatem aliquid doloribus ab, officia veniam maiores magnam maxime. Vero esse non dicta autem, aliquam eos dolore harum sed incidunt architecto placeat eaque!</div>
  <div>Hic veniam porro autem quia, commodi provident sunt, at tempore libero, consequuntur, accusamus. Vero illo molestias nam, velit hic iure, a sequi, explicabo ipsum voluptates numquam modi dolorum rem culpa!</div>
  <div>Iusto a cum nihil eos atque, impedit, debitis quis dolor consectetur ratione ipsam nisi recusandae temporibus possimus. Non, natus a, consequuntur provident facilis nemo assumenda dolorum vitae, eligendi et harum.</div>
</main>
<div id="footer">
  <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>
</div>

问题是页脚将其位置与body标签相关联，并且当键盘出现时，人体的高度会发生变化，而footer会进入键盘。