Home/ Questions/Q 3873674
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T22:03:51+00:00

Just trying to get into JQueryMobile. I want to do something simple like putting

  • 0

Just trying to get into JQueryMobile. I want to do something simple like putting a table in the centre of a page but it seems to put the table at the top next to the header with the footer below, so only 30% of my page is being used. I tried setting height=100% for the html, body, and table elements but this did not help. I want the table to use all the available space between the header and the footer.

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js">  
   </script>   
</head> 
<body> 

<div data-role="page">

<div data-role="header">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">   
    <table border=1px>
  </tr>
  <tr >
     <td>This is centered</td>
  </tr>
 </table>       
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /header -->
   </div><!-- /page -->

 </body>
</html>

JD

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t need JQuery or Javascript, just Css 🙂

    <!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">

        <title></title>

        <style>
            #content {
                display: block;
                height: 70%;
            }

            #footer {
                height: 15%;
            }

            #header {
                height: 15%;
            }

            body {
                position:absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;

            }

            /* Sets */

            #content, #header, #footer {
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                -webkit-box-sizing: border-box;

                border: 1px solid black;
                border-bozing: border-box;
            }

            #header > h1, #footer > h4 {
                margin: 0;
            }
        </style>
    </head>

    <body>
        <div id = "header">
            <h1>Page Title</h1>
        </div>

        <table id = "content">
            </tr>
                <td>This is centered</td>
            </tr>
        </table>      

        <div id = "footer">
            <h4>Page Footer</h4>
        </div>
    </body>
</html>

    Preview

    enter image description here

    • 0