今天在调试bug,遇到了一个问题,设计稿(上)和实际(下):
好了大家发现问题了吧,就是最下方的版权块定位问题,方案是在屏幕中最新回复数量少或者无回复时,屏幕无滚动,版权块在屏幕最下方,如果评论过多,则版权块距离最后一条考评论的margin-top是固定的80px,然后要虑到要金融各种屏幕大小的手机,如果用fixed定位是绝对不行的,因为评论一旦过多,多到该出现滚动的时候,版权快的位置就应该在所有评论的下方80px处,所以这里只能动态获得上面几个div的高度以及屏幕总高度来判断版权块位置。 一般的获取div高度的方法就是$('元素').height()方法,百度上都是如下这种吊毛: var h1 = document.getElementById("div1").offsetHeight; //js写法 var h = $("#div1").height(); //jquery写法 但是要知道我这当然不是一个静态页面,需要获取高度的div中的数据是php从数据库获取的,xpost方法传到前台,再循环append到评论板块的div中去。并不是css属性里设置一个height再在js获得它,这就属于一个自适应div块。 所以思路就是:等到数据全部填充到该div块中之后,再获取其高度:
$.xpost(window.location.pathname,'', function (code, message) {
......
$('reply').append(text[0]+text[1]+text[2]+text[3]+text[4]+text[5]+text[6]+text[7]+text[8]+text[9]+text[10]);
setTimeout(function(){
var h = $('.div').eq(0).outerHeight(true);
console.log("高度为:"+h);
},0);
}
即:在该自适应div元素加载完成之后,再用height的方法获取整个高度,这里添加了一个setTimeout(fun,time),这还是
有必要的,数据加载填充毕竟没有那么快,这里setTimeout()方法间隔时间是0,即将此过程加入执行队列中,在以上所有
程序执行完成再来执行该过程,即至少是等到以上动作全部完成才来执行的,所以获取的高度值才是准确的。
以下数据参考:
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
|