今天在做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主内容不足一屏时元素显示在最底部,超出一屏时跟随主内容显示的解决方案,欢迎交流讨论~
近期评论