2013-03-14 64 views
0

我有我的网站上的一些网页,我把这个在我所有的html代码:Phonegap - 为什么我的div高度返回0?

<div id="footer" data-role="footer" class="clearfix"> 
     <div id="footerMenu" class="ui-grid-d"> 
      <div class="ui-block-a footerBlock"> 
       <a href="index.html"><img src="images/global/bottom_menu/product_active.png" /></a> 
      </div> 
      <div class="ui-block-b footerBlock"> 
       <a href="favorite.html"><img src="images/global/bottom_menu/fav.png" /></a> 
      </div> 
      <div class="ui-block-d footerBlock"> 
       <a href="about.html"><img src="images/global/bottom_menu/about.png" /></a> 
      </div> 
      <div class="ui-block-e footerBlock"> 
       <a href="settings.html"><img src="images/global/bottom_menu/settings.png" /></a> 
      </div> 
      </div> 
    </div> 

CSS:

#footerMenu { 
    background-color:#23476E; 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    width:100%; 
    opacity:1 !important; 
    display:block; 
    z-index:1000; 
} 

#footerMenu img { 
    margin: 0 auto; 
    width:96%; 
} 

.footerBlock a{ 
    text-align:center; 
    display:block; 
} 

我的JS:

$('#searchResultPage').live('pageshow', function(){ 
    console.log("height: " + $("#footer").height(); 
}); 

然后,我的应用程序将作为第一页加载index.html,并且如上所述,我可以通过$("#footer").height()获得页脚高度。但是当我试图从about.html再次获得高度时,例如,高度返回0.

是否有人可以告诉我为什么高度返​​回0?

+1

你应该显示你的CSS。我假设footerBlock的浮动? – kennypu 2013-03-14 03:50:53

+0

使用jquery mobile?我认为它做了一些疯狂的DOM注入,可能有多个ID或者抓错了一个。如果我记得你必须用jquery mobile重新启动或初始化。我相信'$(document).ready'不是用jqmobile去的。粘贴您的JavaScript以及包括如何初始化。 – Leeish 2013-03-14 03:51:52

+0

阅读PAGE下的http://jquerymobile.com/demos/1.3.0/docs/faq/。我敢打赌你的问题是基于其中之一的。您无法遵循与jQuery移动平台一样的常规网站使用方法,因为DOM在每个页面上注入的方式有几个跳跃点。 – Leeish 2013-03-14 03:56:59

回答

0

即使准备好文档已经开启,我很可能还没有加载图像(我最近遇到过这个问题)。由于您尚未提供图片大小,因此只要浏览器知道div高度为零。

最简单的解决方案是在您的<img...>标记中包含图像大小。

+0

除此之外,还有其他可能的解决方案吗? – Rendy 2013-03-14 06:20:11

+0

只需将图像大小指定到img标记中即可。 – Imperative 2013-03-14 06:50:45

+0

除非你可以想出一个方法来获得所有图像加载后的事件,然后调整div的大小。我从来没有能够找到任何适用于此的东西。 – 2013-03-14 19:10:54