当键盘打开HTML / CSS时页脚被推高？

Question

所以我想在这里做的就是在我的网站上添加一个简单的页脚，在桌面上打开时效果很好但是当平板电脑或移动设备在键盘打开时，例如他们登录页脚向上移动到页面在键盘上方。有没有办法解决这个问题，任何想法？

CSS

self.imageView.animationImages = NSArray(array: (AppInstance?.arrGIFPHotos)!) as? [UIImage]

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

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>

关键在于它的位置与身体标签有关，当键盘出现身体高度变化并且页脚进入键盘时。

Answer 2

这是一个廉价的hacky修复，但是：

CSS：

@media screen and (max-width: 800px) {

    .hide-footer {
        display: none;
    }

}

的jQuery

$('input').focus(function() {
   $('footer').addClass('hide-footer');
});

$('input').focusout(function() {
   $('footer').removeClass('hide-footer');
});

只要您专注于输入标记，就会将类.hide-footer添加到页脚。此外，仅当屏幕宽度小于800px时才会隐藏页脚（您应该自定义，但这应该涵盖移动设备）。

Answer 3

当您专注于输入字段时，您可以隐藏页脚，并使用jquery在输入字段中再次显示焦点。

$( "#inputID" ).focus(function() {
  $("#footer").hide();
});

$( "#inputID" ).focusOut(function() {
  $("#footer").show();
});

Answer 4

在这种情况下，遗憾的是，CSS似乎没有修复。因此，您必须使用javascript首先计算窗口的高度（以像素为单位），然后设置css属性。你可以在一行中做到！但我在这里做了两件事：

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

Answer 5

你无法修复它，因为没有任何错误，你的页脚正在完成你告诉它要做的事情。

页脚的CSS规则告诉它始终“附加”到窗口的底部，即使移动设备上的键盘可见，键盘的顶部现在也是窗口的底部。

如果需要，您可以删除position:absolute值，也可以将其更改为position:fixed