html - Phonegap - 为什么我的 div 高度返回 0？

Question

我在我的网站上有一些页面，我把它放在我所有的 html 代码中:

<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？

Answer 1

很可能即使已触发文档就绪，图像仍未加载(我最近遇到了这个问题)。由于您没有提供图像尺寸，因此浏览器知道 div 高度为零。

最简单的解决方案是在您的 <img...> 中包含图片尺寸标签。