1.概要：

　　手机页面底端有时候需要显示版权信息，诸如一行文字或者一个背景图片，但是页面的滚动长度未知，需要考虑两个问题

　　当页面高度小于屏幕高度时候：

　　希望最后一行信息显示在屏幕底端，同时也就是页面底端，跟随页面滚动而滚动，可能会想到设置position的css属性为fixed，这个属性并不能使最后一行随页面滚动

　　当页面高度高于屏幕高度时候：

　　希望最后一行紧紧跟随在页面最底端，而不是在屏幕最底端

2.思路：

　　不去管position属性，最后一行设置display为block，就是常用的布局方式，假设在页面可用元素到底端版权信息中间有一个高度为0的div，

这个div检测页面高度如果大于屏幕，高度设置为0，检测页面高度小于屏幕，高度就设置为一个值，撑开页面到最后版权信息的距离

3.代码：

　　下面开发了一个ios 的webapp（就是一个webview）来加载页面，也可以用手机上的浏览器来测试。

上图页面内容为A、B、C三大块和底端文字，中间的D就是用来辅助的div

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" />

         <meta http-equiv="Cache-Control" content="no-store" />

         <meta name="format-detection" content="telephone=no">

         <link href='css/ogn.css' rel="stylesheet" type="text/css"/>

         <title></title>

     </head>

     <body onload="loadHtml()" style="background-color: purple;"  onorientationchange="onOrientationChanged()">

         <div id="rootDiv" style="background-color:#49C5E7;background-position-y:100%; background-image:url('images/wx_06.png');background-size:100% auto; background-repeat:no-repeat; width: 100%;height:auto;position: absolute;left: 0px;top: 0px;">

             <div id="headDiv">

                 <div id="headDiv" style="height: 200px;background: red;opacity: 1;" >

                     <label style="display: block;text-align: center;line-height: 200px;font-size: 30px;color:white;">A</label>

                 </div>

                 <div id="middleDiv" style="height: 100px;background: green;opacity: 1;">

                     <label style="display: block;text-align: center;line-height: 100px;font-size: 30px;color:white;">B</label>

                 </div>

                 <div id="footerDiv" style="height: 250px;background: blue;opacity: 1;">

                     <label style="display: block;text-align: center;line-height: 100px;font-size: 30px;color:white;">C</label>

                 </div>

             </div>

             <div id="gapDiv" style="height: 0px;background: black;opacity: 0.5">

                 <label id="label1" style="display: block;text-align: center;line-height: 100%;font-size: 30px;color:white;">D</label>

             </div>

             <label id="label0" style="text-align: center;display: block;width: 100%;margin-bottom: 0px;">页面最后一行文字</label>

         </div>

     </body>

 </html>

 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 <script>

     function loadHtml() {

         upadateHtml();

     }

     function onOrientationChanged() {

         upadateHtml();

     }

     function upadateHtml() {

         setTimeout(function() {

             var headH = $('#headDiv').height();

             var deviceH = document.documentElement.clientHeight;//可用的设备高度

             var labelH = $('#label0').height();

             var realH = labelH + headH;

             if (realH < deviceH) {

                 $('#gapDiv').css('height', deviceH - realH + 'px');

                 $('#label1').css('line-height',deviceH - realH + 'px');

                 $('#gapDiv').css('display','block');

             } else {

                 $('#gapDiv').css('height', 0 + 'px');

                 $('#gapDiv').css('display','none');

                 $('#label1').css('line-height',-+'px');

             }

             var pageH=document.body.scrollHeight;//页面的实际高度

         }, 100);

     }

 </script>

关键地方在25行，设置了辅助div，用js来判断页面长短。当页面过长，gapdiv就变为0了，类似下图：

这是已经向上滚动后的结果，从A字母的位置就能看出

注意：12行设置图片为背景图片的写法

　　

　　

内容显示在HTML页面底端的一些处理方式的更多相关文章

  1. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  2. 使用scrollpagination实现页面底端自动加载无需翻页功能

    当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...

  3. 非一屏页面，出现遮罩层页面位置不动，并且遮罩层一屏显示。（pc,移动端都适用的方法）

    首先展示页面效果: 遮罩没出现的页面张酱紫:页面在楼层二这个位置. 遮罩显示:后面页面页面任停留在当前浏览位置,滚动条并未回顶部 下面来说说写法: css: 页面具体布局样式......(此处省略无数 ...

  4. selenium下拉到页面最底端

    selenium操控浏览器下拉到页面最底端: #!/usr/bin/env python # -*- coding: utf-8 -*- from selenium import webdriver ...

  5. h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  6. 商务系统的构造思路（无源码！）+如何用jsp实现点击单选框内容显示在另一个jsp页面

    敲码经验总结: 之前犯了一个错误就是,没有从底层开始学起,有啥问题,就直接博客园找源码,去CSDN找源代码,看到代码就复制粘贴,结果从新梳理知识点的时候,貌似除了复制粘贴,印象深刻的知识啥也没学到. ...

  7. selenium 下拉到页面最底端

    selenium操控浏览器下拉到页面最底端: https://www.cnblogs.com/TTyb/p/7662430.html #!/usr/bin/env python # -*- codin ...

  8. jq 测试是否到页面最底端

    $(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).he ...

  9. 解决位于底端Edittext 输入时被软盘遮盖

    遇到这种情况我们首先到网上搜一圈,大概情况是需要设置<activity/> android:windowSoftInputMode="adjustResize" ,按照 ...

随机推荐

  1. 快速稀疏角点光流框架（Fast sparse corner optical flow framework）

    光流适用在连续的图像系列(视频流)中,描述本身或画面目标的运动状态:在目标跟踪.运动分析.甚至slam中都有广泛应用. opencv里就有不少光流算法,其中很经典也是当前被调用最多的的Lucas-Ka ...

  2. [转载]使用mpvue搭建一个初始小程序

    1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安 ...

  3. docker中创建MySQL及在外部使用Navicat连接

    1:获取MySQL镜像 运行 docker pull mysql [root@MyCentos7- ~]# docker pull mysql Using default tag: latest la ...

  4. string类型和int类型之间的转换

    一.string转int 1. 使用string流 /* 字符串转整型 */ /* * istringstream:从 string 读取数据 * ostringstream:向 string 写入数 ...

  5. Alpha发布PSP Daily评价总结报告

    Alpha发布PSP Daily评价总结报告 优点: 1.用户人群较为明确,定位较为准确. 2.亮点:暂停任务时是无法结束当前任务的. 3.说明书写的详细.语言流畅.能实现的功能都体现出来. 4.下拉 ...

  6. java第二次试验报告

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java程序设计   班级:1353       姓名:郭皓  学号:20135327 成绩:             指导 ...

  7. 1001. A+B Format (20)的解题思路以及多源代码文件的尝试编写

    前言 这几天刚学了多源代码文件的编译,因为想尝试使用一下这种方法,所以想用此编写这次作业的程序.正好可以learning by doing,在做当中学习新知识.(编译器为Dev-C++) github ...

  8. roject ..\appcompat_v7 is missing. Needed by eclipse 转AS项目时遇到的问题

    参考的 http://www.cnblogs.com/vanezkw/p/4182917.html 去转换项目, 在第一步的时候就遇到问题 ,提示 missing 而那个又是兼容包 解决方法:项目右键 ...

  9. whu 1538 - B - Stones II 01背包

    题目链接: http://acm.whu.edu.cn/land/problem/detail?problem_id=1538 Problem 1538 - B - Stones II Time Li ...

  10. 【CSAPP笔记】8. 汇编语言——数据存储

    下面介绍一些C语言中常见的特殊的数据存储方式,以及它们在汇编语言中是如何表示的. 数组 数组是一种将标量数据聚集成更大数据类型的方式.实现数组的方式其实十分简单,也非常容易翻译成机器代码.C语言的一个 ...