html - JQuery Mobile - 我的左侧菜单显示了我页面的所有内容

标签 html css jquery-mobile

我将 JQuery-Mobile 用于 ASP.NET MVC 4 应用程序中的某些组件。但是我有一个显示问题。

<body>
  <div id="fb-root"></div>
  <script>(function (d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&appId=679266642148477&version=v2.0";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  </script>
  <div data-role="page">
    <div data-role="panel" id="userMenu" data-position="left" data-display="push" data-theme="g">
        <ul data-role="listview" data-theme="g">
            <li id="menuTxt" data-role="list-divider">Menu</li>
            <li><a data-ajax="false" href="/Home">Accueil</a></li>
            <li><a data-ajax="false" href="/CheckFridge">Mes ingr&eacute;dients</a></li>
            <li><a data-ajax="false" href="/AddRecipe">Ajouter une recette</a></li>
            <li><a data-ajax="false" href="#">D&eacute;connexion</a></li>
            <li><a data-ajax="false" href="/MyRecipes">Mes recettes</a></li>
            <li><a data-ajax="false" data-href="https://developers.facebook.com/docs/plugins/">Partager</a></li>
        </ul>
    </div>
    <div data-role="header">
        <a id="menuBtn" href="#userMenu"></a>
        <img id="icook_logo" src="~/Content/images/icook_logo.jpg" />
    </div>

    <div data-role="ui-content">
        <a data-role="button" href="@Url.Action("Index", "CheckFridge")" data-theme="c" data-ajax="false" id="checkFridgeBtn">Check mon frigo</a>
        <a data-role="button" data-theme="c" id="classicSearch">Recherche classique</a>
    </div>
 </div>
</body>

由于我添加了左侧菜单(),所以所有内容都在我页面的底部。

我的页面顶部:

enter image description here

我的页面底部:

enter image description here

你能帮帮我吗?

谢谢

最佳答案

问题是您的 ui-content div。如果您使用的是 jQM 版本 1.4.x,它应该是:

<div role="main" class="ui-content">

如果您使用的是 1.3.x:

<div data-role="content">

关于html - JQuery Mobile - 我的左侧菜单显示了我页面的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25148733/

相关文章:

html - 表格边框不显示

html - 使用背景图像填充 SVG 路径元素,无需平铺或缩放

java - 使用 Selenium 单击 div 标签内具有属性角色的按钮

php - 以前我添加了颜色 : red to my code, 但是我已经删除了它,但它仍然显示在我的网站上

css - googlebot 在加载网站时使用的视口(viewport)大小是多少?这有关系吗?

javascript - 如何在 jquery 中检查一个 div 是否包含单选按钮?

javascript - 如何强制 google chrome/firefox 使用 Internet explorer web 浏览器控件

html - 将div定位到css的右下角

html - 单击 URL 或 Href 时出现 Jquery 移动脚本错误(**错误加载页面**)?

div 底部的 jquery 移动额外间距