如何用jquery mobile創建100％高度的div？

如何使用id = test測試100％身高的div？如何用jquery mobile創建100％高度的div？

<div data-role="page" id="device1"> 
    <div data-role="header"> 
     <h1>Title</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <div data-role="fieldcontain"> 
     <input type="range" name="slider1" id="slider1" value="0" min="0" max="255" /> 
     </div> 
     <div id=test height=100%> 
     </div>  
    </div><!-- /content --> 
<div data-role="footer" data-position="fixed"> 
    </div><!-- /footer --> 
</div><!-- /page -->

來源

2011-09-24 LA_

好的，這裏是我爲你準備的。請記住，如果頁面的內容很高，那麼這可能不太可用。滑動區域是內容下的所有內容。因此，隨着內容區域變大，滑動區域變小。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>jQuery Swipe</title> 

    <link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/> 
    <script src="jquery-mobile/jquery.min.js" type="text/javascript"></script> 
    <script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script> 

    <script src="phonegap.js" type="text/javascript"></script> 

    <script> 
     $(document).ready(function() { 

      // Set the initial window (assuming it will always be #1 
      window.now = 1; 

      //get an Array of all of the pages and count 
      windowMax = $('div[data-role="page"]').length; 

      $('.swipeArea').bind('swipeleft', turnPage); 
      $('.swipeArea').bind('swiperight', turnPageBack); 
     }); 

     // Named handlers for binding page turn controls 
     function turnPage(){ 
      // Check to see if we are already at the highest numbers page    
      if (window.now < windowMax) { 
       window.now++ 
       $.mobile.changePage("#device"+window.now, "slide", false, true); 
      } 
     } 

     function turnPageBack(){ 
      // Check to see if we are already at the lowest numbered page 
      if (window.now != 1) { 
       window.now--; 
       $.mobile.changePage("#device"+window.now, "slide", true, true); 
      } 
     } 
     </script> 

     <style> 
      body, div[data-role="page"], div[data-role="content"], .swipeArea { 
       height: 100%; 
       width: 100%; 
      } 
    </style> 
</head> 
<body> 

<div data-role="page" id="device1""> 
    <div data-role="header"> 
     <h1>Page One</h1> 
    </div> 
    <div data-role="content"> 
     Content 
     <div class=swipeArea></div> 
    </div> 

    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

<div data-role="page" id="device2" style="height: 100%"> 
    <div data-role="header"> 
     <h1>Content 2</h1> 
    </div> 
    <div data-role="content" style="height: 100%"> 
     Content  
     <div data-role="fieldcontain"> 
      <label for="slider">Input slider:</label> 
      <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> 
     </div> 
     <div class=swipeArea></div> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

<div data-role="page" id="device3" style="height: 100%"> 
    <div data-role="header"> 
     <h1>Content 3</h1> 
    </div> 
    <div data-role="content" style="height: 100%"> 
     Content  
     <div class=swipeArea></div> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

<div data-role="page" id="device4" style="height: 100%"> 
    <div data-role="header"> 
     <h1>Content 4</h1> 
    </div> 
    <div data-role="content" style="height: 100%"> 
     Content  
     <div class=swipeArea></div> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

</body> 
</html>

來源

2011-09-24 22:06:40

謝謝，傑森。它或多或少可以運行，如果我刪除'height：100％;'（這樣的高度在Android上無法正常工作 - 它會嘗試水平滾動）。「或多或少」因爲在iPhone和Android上它認爲它可以垂直滾動。 –

順便說一句，我應該繼續參考'phonegap.js'嗎？和多個'style =「height：100％」'？它會解決我上面描述的問題嗎？ –

如果您沒有運行手機差距應用，那麼不需要。你可能會刪除內聯樣式。我忘了。我不知道它是否會解決這個問題 –

如何用jquery mobile創建100％高度的div？

回答

相關問題