Question

我遇到过问题，我需要将内容的高度设置为特定像素（以便谷歌地图正确显示）。但是，我不知道我的网站将使用哪些设备（手机，智能手机）和屏幕分辨率。我知道如何实现这一点，但由于我使用的是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 mobile page height尝试了无效的解决方案

Answer 1

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

$('div[data-role="content"]').height(window.innerHeight - ($('div[data-role="header"]').height() + $('div[data-role="footer"]').height()));

内容自动高度调整取决于页面高度

1 个答案: