Question

使用jQuery mobile我希望我的中间内容部分在页脚和标题之间是全高。目前，背景颜色填充可用空间高度的2/3'。为此做了什么工作？

（如果无法完成，是否有一种简单的方法让剩余的1/3高度的bgcolor与主题相同？）

  <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script src="/MvcTest/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
    <script src="/MvcTest/Scripts/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>


    <link href="/MvcTest/Content/jquery.mobile-1.0b3.css" rel="stylesheet" type="text/css" />

...

<div data-role="page"  >

    <div data-role="header" data-position="inline" >
        @Html.ActionLink("Home", "Index", "Home")
        <h1>Title</h1>
        @Html.ActionLink("About", "About", "Home")

    </div><!-- /header -->

    <div data-role="content" data-theme="d" >   
        <p>Page content goes here.</p>      
        @RenderBody()
    </div><!-- /content -->

    <div data-role="footer" class="ui-bar" data-position="fixed" >
        @RenderSection("CustomFooter", false)
    </div>



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

Answer 1

不需要解决方法。默认情况下，它应该填满整个空间。这里有很多事情要考虑，你正在使用的JQuery Mobile版本，你正在使用的物理设备，智能手机，平板电脑等等。我建议你从视口开始。确保在标题的顶部有这个：

<meta name="viewport" content="width=device-width, initial-scale=1">

这将为您提供页面上应用程序的最大可见性。这也将考虑设备方向更改事件。 Doc reference

更新：您需要确保按以下顺序加载文件：CSS（第一个），JQuery（第二个），JQuery Mobile（第三个）。您的CSS文件最后加载，因此未应用样式。您的代码应如下所示：

<link href="/MvcTest/Content/jquery.mobile-1.0b3.css" rel="stylesheet" type="text/css" />
<script src="/MvcTest/Scripts/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="/MvcTest/Scripts/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>

另外，你有一个语法错误......在jquery-1.6.3.min.js文件之后有一个闭括号和一个双引号。我删除了它。你的代码现在应该可以正常工作。

jQuery Mobile和Full Height of Content部分？

1 个答案: