0

コンテンツの高さをピクセル単位で指定する必要があるという問題が発生しました (Google マップを正しく表示するため)。ただし、自分のサイトがどのデバイス (携帯電話、スマートフォン) で使用されるか、および画面の解像度がどのようになるかはわかりません。これを実装する方法は考えていますが、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 に答える