0

Web にいくつかのページがあり、すべての 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を返す理由を教えてくれる人はいますか?

4

1 に答える 1

0

document-ready が起動したにもかかわらず、画像がまだ読み込まれていない可能性が非常に高いです (私は最近これに遭遇しました)。画像サイズを指定していないため、ブラウザーが div の高さを認識している限り、ゼロです。

<img...>最も簡単な解決策は、タグに画像サイズを含めることです。

于 2013-03-14T03:59:46.650 に答える