Раздел jQuery Mobile и полная высота контента?

Question

С помощью jQuery mobile я бы хотел, чтобы мой средний раздел контента располагался на полную высоту между нижним колонтитулом и верхним колонтитулом.В настоящее время цвет фона заполняет 2/3 'высоты доступного пространства.Какой обходной путь для этого?

(если это невозможно сделать, есть ли простой способ сделать bgcolor оставшейся 1/3 высоты такой же, как тема?)

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

Это даст вам максимальную видимость вашего приложения на странице. Это также будет учитывать события изменения ориентации устройства. Ссылка на документ

Обновление: необходимо убедиться, что вы загружаете файлы в следующем порядке: 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 были закрытые скобки и двойные кавычки. Я удалил это. Теперь ваш код должен нормально работать.