我遇到了问题,我需要内容的高度以像素为单位(以便谷歌地图正确显示)。但是我不知道我的网站将在哪些设备上使用(手机、智能手机)以及屏幕分辨率是多少。我有一个想法如何实现这一点,但由于我使用的是 jquery mobile,所以我不知道该怎么做。这个想法很简单:获取页面高度,然后content.height = page.height-(footer.height+header.height)
这是我的html代码:
<html>
<body style="margin:0">
<div data-role="page" class="page-nearme">
<div data-role="header" data-id="navbar" data-position="fixed" data-tap-toggle="false"></div>
<!-- /header -->
<div data-role="content">
<div id="search-panel">
<input id="target" type="search" placeholder="Search Box">
</div>
<div id="map_canvas" style=""></div>
</div>
<!-- tabbar -->
<div data-role="footer" data-id="main_footer" data-position="fixed" data-fullscreen="true" data-visible-on-page-show="false" id="fxedfooter" data-tap-toggle="false" onclick="showfooter">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a id="menu-item-home" data-icon="custom" href="index.html"> </a></li>
<li><a id="menu-item-near-me" data-icon="custom" href="near-me.html" class="ui-btn-active ui-state-persist"> </a></li>
<li><a id="menu-item-rewards" data-icon="custom" href="rewards.html"> </a></li>
<li><a id="menu-item-invite" data-icon="custom" href="invite.html"> </a></li>
<li><a id="menu-item-profile" data-icon="custom" href="profile.html"> </a></li>
</ul>
</div>
<!-- /navbar -->
</div>
</div>
</body>
</html>
PS 我在jQuery 移动页面高度中尝试了不起作用的解决方案