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を返す理由を教えてくれる人はいますか?