当键盘打开HTMLCSS时页脚被推高？

概述所以我想在这里做的就是在我的网站上添加一个简单的页脚,当在桌面上打开时可以很好地工作但是当在平板电脑或移动设备上打开键盘时,例如他们登录页脚会向上移动页面到键盘上方.有没有办法解决这个问题？ CSS #footer { width: 100%; background-color: #4c66a4; color: #fff; position: absolute; left: 0 所以我想在这里做的就是在我的网站上添加一个简单的页脚,当在桌面上打开时可以很好地工作但是当在平板电脑或移动设备上打开键盘时,例如他们登录页脚会向上移动页面到键盘上方.有没有办法解决这个问题？

CSS

#footer {  wIDth: 100%;  background-color: #4c66a4;  color: #fff;  position: absolute;  left: 0px;  bottom: 0px;  text-align: center;}@H_419_14@  
<div ID="footer">  <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p></div>@H_419_14@  
  
解决方法 尝试在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;}@H_419_14@  
<div ><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>@H_419_14@  
问题在于,页脚与身体标签的位置有关,当键盘出现身体高度变化并且页脚出现在键盘上时.
                            	          总结       
以上是内存溢出为你收集整理的当键盘打开HTML / CSS时页脚被推高？全部内容，希望文章能够帮你解决当键盘打开HTML / CSS时页脚被推高？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1085043.html