How to create div with 100% height with jquery mobile?

Question

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

score 5 · Accepted Answer · answered Sep 24 '11 at 22:06

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>

Thanks, Jason. It works more or less OK, if I remove `height: 100%;` (with such height it doesn't work properly on Android - it tries to scroll horizontally). "More or less" since on iPhone and Android it thinks that it can be scrolled vertically. — LA_, Sep 25 '11 at 08:01
Btw, should I keep reference to `phonegap.js`? And multiple `style="height: 100%"`? Will it fix the problem I've described above? — LA_, Sep 25 '11 at 08:03
If you are not running a phone gap app, then no. And you can probablt remove the inline styles. I forgot to. I don't know if it will fix that problem — Jason Dean, Sep 25 '11 at 08:17
OK, now it is clear that this is not the best approach ;) So, I am returning back to the solution with binding/unbinding. Thank you. — LA_, Sep 25 '11 at 08:25

How to create div with 100% height with jquery mobile?

1 Answers1

Linked