0

我遇到了问题，我需要内容的高度以像素为单位（以便谷歌地图正确显示）。但是我不知道我的网站将在哪些设备上使用（手机、智能手机）以及屏幕分辨率是多少。我有一个想法如何实现这一点，但由于我使用的是 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">&nbsp;</a></li>
                        <li><a id="menu-item-near-me" data-icon="custom" href="near-me.html" class="ui-btn-active ui-state-persist">&nbsp;</a></li>
                        <li><a id="menu-item-rewards" data-icon="custom" href="rewards.html">&nbsp;</a></li>
                        <li><a id="menu-item-invite" data-icon="custom" href="invite.html">&nbsp;</a></li>
                        <li><a id="menu-item-profile" data-icon="custom" href="profile.html">&nbsp;</a></li>
                    </ul>
                </div>
                <!-- /navbar -->
            </div>
        </div>
    </body>

</html>

PS 我在jQuery 移动页面高度中尝试了不起作用的解决方案

4

1 回答 1

2

你有没有尝试过这样的事情：

$('div[data-role="content"]').height(window.innerHeight - ($('div[data-role="header"]').height() + $('div[data-role="footer"]').height()));
于 2012-11-15T08:53:47.547 回答