1.概要:

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

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

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

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

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

2.思路:

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

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

3.代码:

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

内容显示在HTML页面底端的一些处理方式-LMLPHP

上图页面内容为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了,类似下图:

内容显示在HTML页面底端的一些处理方式-LMLPHP

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

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

  

  

05-11 19:57
查看更多