jQuery: Header height returns 0 on subsequent pages

问题

I don't really understand the problem I am having now. I have this code:

$(document).on("pageshow", "[data-role=page]", function(){
   var $height = $("[data-role=header]").height();
   alert($height);
});

This code is working fine on the first page (index) and actually returns an alert with 50. However when I navigate to different pages, the alert returns a height of 0 unless I do a full refresh.

I tried window onload function too, it returns me 0. What I want to do is to get the height of the header for every page and use it to align ui-content properly.

Can anyone explain to me what's going on and what is the right way to do this? There's not much in the header except for a font and a button.

回答1:

You should explicitly specify which header height you really want. Check the following code, hope this works for you.

var $height = $("[data-role=header]:visible").height();

回答2:

I'm not entirely sure what you are trying too do. Are you using a div with buttons inside or something els?

But I would do something like this: http://jsfiddle.net/zJxgh/

$(function() {
    var header = $('#header').height();
    alert(header);
});

来源：https://stackoverflow.com/questions/15627973/jquery-header-height-returns-0-on-subsequent-pages