HTML内容溢出跳到底部,css如何实现html主内容不足一屏时元素显示在最底部，超出一屏时跟随主内容显示？...

今天在做H5页面的时候遇到了这样的问题：如下图，页面背景是图片的时候，并且页面有输入表单，当点击表单输入框，安卓手机中键盘弹起，这个时候会把背景图片向上顶，这时候看起来就很不美观。

所以我就想着吧底部的人物切成图片，通过img标签放到表单的下面，但是这个时候又遇到了新的问题，如下图：当内容不满一屏的时候，底部的背景就会露出来，所以现在就有了这样的需求，当内容不满一屏的时候，图片在屏幕最底部，超过一屏的时候页面出现滚动，图片正常显示在body的最底部。

现在需求是有了，如何实现呢？我的思路是这样的，首先body里面有两个元素 a和b，我们让body的height：100%，a最小高度100%，这个时候页面出现滚动条，b元素出现在body的底部，这个时候，设置b元素margin-top的值为b元素的高度，而且设为负值，此时b元素出现在屏幕底部，同时a元素设置padding-bottom的值也为b元素的高度，当然我这里元素b是图片，这里的高度要根据屏幕的尺寸动态计算得出。

以下是一个demo的例子源码：

html>

    Document  

    主要页面  

  底部

以上就是通过css来实现html主内容不足一屏时元素显示在最底部，超出一屏时跟随主内容显示的解决方案，欢迎交流讨论~

微信交流(备注：前端)