Home/ Questions/Q 6617751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:44:30+00:00

How to create div with id=test with 100% height? <div data-role=page id=device1> <div data-role=header>

  • 0

How to create div with id=test with 100% height? 

<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 -->
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK, here is what I have for you. Keep in mind though, if the content of the page is tall at all this might not be very usable. The swipe area is everything below the content. So as the content area gets bigger the swipe area gets smaller.

    <!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>
    • 0