Question

这是我的代码： -

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="responsiveslides.min.js"></script>

    <style>

    <!-- #one
    {
    height: 80%;
    width: 50%; 
    } -->
    p { margin: 0 !important; }
    .ui-btn-icon-right:after {
    display:none;
    }
    #one
    {
      padding : 0;
        margin : 0;
    }
    #two
    {
      padding : 0;
        margin : 0;
    }
    #four
    {
      padding-top :1%;
        margin : 0;
    }

    #header {
        position: fixed;
        top: 0;
        width: 100%;
    }

    #footer {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    #content {
        width: 100%;
         background-color:#666;
    }
    </style>
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $(window).resize(function(){
       var height = $(this).height() - $("#header").height() + $("#footer").height()
       alert(height);
       $('#content').height(height);
    })

    $(window).resize(); //on page load
    });//]]>  

    </script>
    </head>

    <body>

    <div data-role="page" id="article1" data-pagination="1">
            <div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
                    <h1>User guide</h1>
            </div>

    <div id="content">
            <div class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
                   <p id="one">Step 1:</p>
                   <p id="two">Fill in your Details to Get Started </p>
            </div>
             <div class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
                   <p id="one">Step 2:</p>
                   <p id="two">Browse the application</p>
                   <p id="four"><font color="green">Save with Lighting</font></p>
                   <p> in your Deatails to Get Started </br>
                Fill in your Deatails to Get Started </p>
                   <h5><font color="green">Explore light options</font></h5>
                 <p>Fill in your Deatails to Get Started </br>
                   Fill in your Deatails to Get Started </p>

            </div>
    </div>
       <div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
            <ul data-role="listview" >
                                    <!-- <li style="text-align:center;">Save with lighting</li> -->
                                    <li style="background:#808080;"><a href="" style="text-align:center;background-color: #666;"></h3>good day</h3></a></li>

            </ul>

      </div>
    </div>
    </body>
    </html>

我的代码有效。它只显示三个div（如页眉和页脚和内容），但是当我在浏览器上运行此代码时，滚动添加了。我希望此代码适合任何浏览器和/或任何移动设备。所以请告诉我如何适应任何屏幕。

先谢谢。

Answer 1

这是因为 data-role =＆＃34;内容＆＃34; 不会覆盖可用空间，除非您强行执行此操作，如下所示：

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;    
}

详细了解 here 。

如何适应屏幕

1 个答案: