当键盘打开HTML / CSS时页脚被推起来了？ [英] Footer is pushed up when keyboard is open HTML/CSS?

问题描述

所以我在这里试图做的是添加一个简单的页脚到我的网站，当在桌面上打开时完美工作，但是在平板电脑或移动设备上，每当键盘打开时，例如登录页脚，页面移动到只是在键盘上方。有没有一种方法来解决这个问题，任何想法？

CSS div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  #footer {width：100％;背景颜色：＃4c66a4;颜色：#fff;位置：绝对; left：0px; bottom：0px; text-align：center;}  

< div id = 页脚 > < p为H.;&安培;副本; 2018年SulmaxCP。保留所有权利。< / p>< / div>

b
$ b

解决方案

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

  html，body {height：100％;}。wrapper {min-height：100％;位置：相对;填充底：90像素; / *页脚的高度* /}＃页脚{width：100％;背景颜色：＃4c66a4;颜色：#fff;位置：绝对; left：0px; bottom：0px; text-align：center;}  

< div class = 包装 ><主> < 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，molitia labourosam odio labore voluptatem sint中的nostrum。 Similique，aliquam。< / div> < div> Sapiente quisquam vitae别名在nesciunt numquam id，distinctio！ Doloribus错误mollitia，optio debitis的理由quaerat maiores odio nostrum autem commodi temporal 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！多洛雷坐在mollitia aspernatur distinctio voluptatibus！ Iste perspiciatis，aliquid a doloribus et。< / div> < div> Molestias，ducimus！ Magni doloribus fugiat praesentium dolore minus perferendis，renhenderit voluptatibus fuga，rerum quam eveniet，odit ut eaque，repellat fornt aperiam repudd nda。这是一个非常重要的东西！< / 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>在laudantium中，< div> Veritatis delectus。 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>在tempore libero，consequuntur，accusamus上的Hic veniam porro autem quia，commodi provident sunt。 Vero ilo molemoas nam，velit hic iure，sequi，explicabo ipsum voluptates numquam modi dolorum rem culpa！< / div> < div> iusto a 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为H.;&安培;副本; 2018年SulmaxCP。保留所有权利。< / p>< / div>< / div>

b $ b

事情是脚注将他的位置与身体标记相关联，当键盘出现身体的高度变化并且脚注在键盘上时。

so all i'm trying to do here is add a simple footer to my site which works perfectly when open on desktop but when on tablet or mobile whenever the keyboard is open such as they login the footer moves up the page to just above the keyboard. Is there a method of fixing this, any ideas?

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>

解决方案

Try using a wrapper inside the body tag.

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>

The thing is that footer relating his position from body tag and when keyboard appears body's height changes and footer get on keyboard.

这篇关于当键盘打开HTML / CSS时页脚被推起来了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！