jQuery nav bars appearing outside of the content w

I have a really annoying issue whereby the persistent jQuery nav bars are appearing outside of the content width, much wider than the rest of the content on the page, this is what I see when I preview my HTML :

Using <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> in the <head> it should set the content width to be the device width, which it has for the header and text element, but not for the nav bars.

This is my full HTML file for the above :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/SmartConf.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
</head> 
<body onload="WL.Client.init({})" id="content"> 

    <div data-role="page">

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

        <div data-role="content">
        <p>Home</p> 
        </div><!-- /content -->

        <div data-role="footer" data-id="foo1" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="tweets.html">Tweets</a></li>

                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

    </div><!-- /page -->

    <script src="js/SmartConf.js"></script>
    <script src="js/messages.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
</body>
</html>

Is there a way of squeezing the nav bars into the main content window?

Thanks

EDIT:

If I drop id="content" from the body tag, then the width adjusts correctly, however by doing so I get various failures in the Worklight startup, as its referencing the "content" ID tag, therefore I believe there is a conflict as both the body and the div are competing for the ID of content...

Remove those two lines:

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/SmartConf.css" />

jQuery nav bars appearing outside of the content w

问题:

回答1:

收藏的人(0)

jQuery nav bars appearing outside of the content w

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮