当键盘打开 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>

原文由 Matt Hutch 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 标签相关联，并且当键盘出现时身体的高度发生变化并且页脚进入键盘。

原文由 Asan Abildin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不幸的是，在这种情况下，CSS 似乎没有解决办法。所以必须先用javascript计算窗口的像素高度，然后再设置css属性。你可以一行完成！但我在这里做了两件事：

 // PUSH FOOTER TO BOTTOM
var innerScreenHeight = window.innerHeight;
document.querySelector("#footer").style.top = innerScreenHeight + "px";

原文由 inwake 发布，翻译遵循 CC BY-SA 3.0 许可协议