如何用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？

回答

相关问题