每当我重新加载时，jquery返回不同的高度

Question

我试图在jQuery中创建一个灯箱类的东西。为了垂直对齐我的灯箱，我使用的是jQuery。这是我的插件代码：

(function($){
    $.fn.lightbox = function(){
        return this.each(function(){

            /*plugin code starts here*/

            var self = this;
            console.log(self);

            /*
            * Now we will vertically align the lightbox
            * To do that we will calculate the body's height,lightboxes height
            * and then subtract later from earlier one.This will give us the total empty space
            * So the margin from the top of lightbox will be half of the result we got from subtraction
            */
            //calculating body's height
            var doc_body_height = $('body').height();
            var lightbox_height = $(self).height();
            var margin_top = (doc_body_height - lightbox_height)/2;
            $(self).css('margin-top',margin_top);
            console.log($(self).height());
            /*plugin code ends here*/

        });
    }
})(jQuery);

但问题是，我的身高达到了18或300。 300是div＃灯箱的实际高度，我不知道为什么同一个功能随机返回不同的高度。

见图片：

很明显，div＃lightbox的高度不是18px。

Answer 1

您正在使用$('body').height()计算身高。这是body元素高度的计算值。这意味着对于只有一个50px高的可见元素的页面，正文将返回50px。相反，需要大量滚动的长页面将返回整个主体高度，而不仅仅是视口中可见的部分。

您需要在计算中使用$(window).height();。

Answer 2

  

但问题是，我的身高达到了18或300。 300是   div＃lightbox的实际高度，我不知道为什么一样   功能随机返回不同的高度-Rajat Saxena

原帖

 var self = this;
 console.log(self);

 var lightbox_height = $(self).height();

window.innerHeight似乎返回viewport的{​​{1}}。请参阅Window.innerHeight。

在window尝试此页面，同时定期调整console＆＃34; height＆＃34; ，以及原始帖子中的片段

console

Answer 3

如果您只支持现代浏览器，那么您可以使用CSS并利用flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/