js 获取自适应高度div的高度

忙了将近一个月的论坛官网终于做好了，今天在调试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

js 获取自适应高度div的高度相关推荐

php获取div高度,JS获取一个未知DIV高度的方法
本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如:var height = element.clientH ...
JS获取元素的大小（高度和宽度）
JS获取元素的大小(高度和宽度) 在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度.如表所示. 元素尺寸属性说明 clientWidth 获取元素可视部分的宽度,即 CSS ...
[js] 获取浏览器当前页面的滚动条高度的兼容写法
[js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介我是歌谣,欢 ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
用纯CSS让子DIV自适应父DIV的高度
我们在前端布局时经常使用栅格布局,而当栅格布局中的某个子元素高度发生变化,外层的父元素高度也会发生变化,如果此时想让其他子元素的高度依旧填充父元素,我们应该怎么做. 这是HTML部分代码,此时左侧的高 ...
css如何自适应浏览器的高度,div css 高度宽度自适应浏览器屏幕大小
DIV布局--IT北瓜原创 html,body{ font: 100% 微软雅黑, 宋体, 新宋体; margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 ...
HTML-父类div高度自适应子类div的高度
转自:http://www.cnblogs.com/gwcyulong/p/6201966.html 父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div ...
js获取和设置DIV元素class值的方法
web页面中,利用js动态的改变div元素的class属性的值,可以实现很多的动态效果.比如动态修改div元素的背景颜色,改变字体的颜色等等.这篇文章就来说一说,javascript 如何获取和设置d ...
html css高度自适应浏览器高度,Div + CSS高度自适应解决方法_html/css_WEB-ITnose
转这几天用div+css写网站,样子上中下,中间是个左中右3列,可这3列不是等高偏巧有不同颜色的背景,结果就是ie.firefox...这些浏览器无一例外的现实的效果都是长短不齐,如何让这3列可以 ...

js 获取自适应高度div的高度

js 获取自适应高度div的高度相关推荐

最新文章

热门文章