Question

我在jqMObile中的导航菜单有问题，当隐藏可折叠物时，它会创建空间以使导航到达＆amp; amp;把它放在屏幕中间。如何保持在底部？
http://jsfiddle.net/a_elnajjar/6K2Mk/

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
        <title>First Mobile JSF page</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
        <style>
            #box1 {
                margin-left: 25%;
                margin-top: 55%;
                width: 50%;
                border-style: solid;
            }
        </style></head><body>
<form id="j_idt5" name="j_idt5" method="post" action="/Info5059Case2v-war/ProductViewer.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />

         <div data-role="page" home="home">
            <div data-role="header">
                <h1>Product View </h1>
            </div> 
                <div data-role="content">
                    <p>Product View </p>
                    <hr />
                       <div class="ui-grid-c">
                            <div class="ui-block-a">

                            </div>



                           <div class="ui-block-b"><select id="j_idt5:vendorNumData" name="j_idt5:vendorNumData" size="1" style="text-aling:left;width: 100%;"> <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
                            </div>

                           <div class="ui-block-c"><input type="submit" name="j_idt5:j_idt14" value="Submit" />
                            </div>

                    </div>
                </div>




            <div data-role="footer" data-postion="fixed">
                <div data-role="navbar">
                    <ul><html xmlns="http://www.w3.org/1999/xhtml">

    <!-- INTERFACE -->

    <!-- IMPLEMENTATION -->     
         <li><a href="/Info5059Case2v-war/C2Control?jsf=V" data-ajax="false">Add Vendor</a> </li>
</html><html xmlns="http://www.w3.org/1999/xhtml">

    <!-- INTERFACE -->

    <!-- IMPLEMENTATION -->     
         <li><a href="/Info5059Case2v-war/C2Control?jsf=P" data-ajax="false">Add Product</a> </li>
</html><html xmlns="http://www.w3.org/1999/xhtml">

    <!-- INTERFACE -->

    <!-- IMPLEMENTATION -->     
         <li><a href="/Info5059Case2v-war/C2Control?jsf=O" data-ajax="false">Add OP Gen</a> </li>
</html><html xmlns="http://www.w3.org/1999/xhtml">

    <!-- INTERFACE -->

    <!-- IMPLEMENTATION -->     
         <li><a href="/Info5059Case2v-war/C2Control?jsf=r" data-ajax="false">View Product</a> </li>
</html><html xmlns="http://www.w3.org/1999/xhtml">

    <!-- INTERFACE -->

    <!-- IMPLEMENTATION -->     
         <li><a href="/Info5059Case2v-war/C2Control?jsf=n" data-ajax="false">View Vendor</a> </li>
</html><html xmlns="http://www.w3.org/1999/xhtml">

    <!-- INTERFACE -->

    <!-- IMPLEMENTATION -->     
         <li><a href="/Info5059Case2v-war/C2Control?jsf=w" data-ajax="false">View PO</a> </li>
</html> 
                    </ul>
                </div>            
            </div>  
        </div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-3402423727172392545:-4304552463092646100" autocomplete="off" />
</form></body>
</html>

Answer 1

在你的css中添加这两行。

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

如何保持导航div在底部jQMObile？

1 个答案: