內容自動高度調整取決於頁面高度
[英]Content auto height adjust depends on page height
問題描述
我遇到了問題，我需要我的內容的高度以像素為單位（以便谷歌地圖正確顯示）。 但是我不知道我的網站將在哪些設備上使用（手機、智能手機）以及屏幕分辨率是多少。 我有一個想法如何實現這一點，但由於我使用的是 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 移動頁面高度中嘗試了沒有工作的解決方案
1 個解決方案
解決方案1
2 已采納 2012-11-15 08:53:47
你有沒有嘗試過這樣的事情：
$('div[data-role="content"]').height(window.innerHeight - ($('div[data-role="header"]').height() + $('div[data-role="footer"]').height()));
div高度自動調整以適應其中的加載頁面內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.