IOS美区账号微信: springsunshine2017

前端技术 · 2020年5月26日 0

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的例子源码:

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