使用JQueryMobile将表放在页面的中心

时间:2011-01-11 10:44:30

标签: jquery html html5

试图进入JQueryMobile。我想做一些简单的事情,比如把一张桌子放在一个页面的中心,但它似乎把桌子放在标题的顶部,下面有页脚,所以我的页面只有30%被使用。我尝试为html,body和table元素设置height = 100%,但这没有帮助。我希望表使用页眉和页脚之间的所有可用空间。

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

1 个答案:

答案 0 :(得分:1)

你不需要JQuery或Javascript,只需要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>

<强> 预览

enter image description here