jQuery nav bars appearing outside of the content width

问题

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

回答1:

Remove those two lines:

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

来源：https://stackoverflow.com/questions/11725351/jquery-nav-bars-appearing-outside-of-the-content-width

标签

jquery

jquery-mobile

ibm-mobilefirst