內容自動調整高度取決於頁面高度

我遇到問題，我需要我的內容高度以像素爲單位（谷歌地圖顯示正確）。不過，我不知道我的網站將用於哪些設備（手機，智能手機）以及屏幕分辨率。我有一個想法如何實現這一點，但因爲我使用jQuery的手機，我不知道該怎麼做。這個想法很簡單：讓網頁的高度，然後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試圖解決方案，沒有工作

來源

2012-11-15 sanny Sin

您是否嘗試過這樣的事情：

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

來源

2012-11-15 08:53:47 gregory

這實際上工作，但我如何使用不innerHeight，但全身/ html的高度？ –

'window.innerHeight（）'返回瀏覽器窗口視口的高度（以像素爲單位）。所以我想這就是你要找的。此外，請參閱'innerHeight（）'的文檔以及與'outerHeight（）'的區別：https：//developer.mozilla.org/en-US/docs/DOM/window.innerHeight – gregory

謝謝，讓它工作 –

內容自動調整高度取決於頁面高度

回答

相關問題