今天在做H5页面的时候遇到了这样的问题：如下图，页面背景是图片的时候，并且页面有输入表单，当点击表单输入框，安卓手机中键盘弹起，这个时候会把背景图片向上顶，这时候看起来就很不美观。
所以我就想着吧底部的人物切成图片，通过img标签放到表单的下面，但是这个时候又遇到了新的问题，如下图：当内容不满一屏的时候，底部的背景就会露出来，所以现在就有了这样的需求，当内容不满一屏的时候，图片在屏幕最底部，超过一屏的时候页面出现滚动，图片正常显示在body的最底部。
现在需求是有了，如何实现呢？我的思路是这样的，首先body里面有两个元素 a和b，我们让body的height：100%，a最小高度100%，这个时候页面出现滚动条，b元素出现在body的底部，这个时候，设置b元素margin-top的值为b元素的高度，而且设为负值，此时b元素出现在屏幕底部，同时a元素设置padding-bottom的值也为b元素的高度，当然我这里元素b是图片，这里的高度要根据屏幕的尺寸动态计算得出。
以下是一个demo的例子源码：
<textaret>
<!DOCTYPE html><html lang=”en”>
<head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title></head>
<body> <style> html, body { height: 100%; margin: 0; padding: 0; text-align: center; color: #000; }
.page { padding-top: 50px; box-sizing: border-box; min-height: 100%; padding-bottom: 50px; background-color: rgba(228, 34, 34, 0.6); }
footer { height: 50px; line-height: 50px; margin-top: -50px; background-color: rgba(0,0,0,0.6); } </style> <div class=”page”> 主要页面 </div> <footer>底部</footer></body>
</html>
</textarea>
以上就是通过css来实现html主内容不足一屏时元素显示在最底部，超出一屏时跟随主内容显示的解决方案，欢迎交流讨论~
近期评论