jQuery Mobile and Full Height of Content section?

With jQuery mobile I would like my middle content section to be full height between the footer and header. Currently, the background color fills 2/3' the height of the available space. What is the work around for this?

(if it cannot be done, is there an easy way to have the bgcolor of the remaining 1/3 height the same as the theme?)

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

---

No workaround should be necessary. By default, it should fill the entire space. There are multiple things to consider here, the version of JQuery Mobile you are using, the physical device, smartphone, tablet, etc. you are using, etc. I recommend you start with the viewport. Make sure you have this at the top of the header:

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

This will give you maximum visibility for your application on the page. This will also account for device orientation change events. Doc reference

Update: You need to make sure you load the files in THIS order: CSS (first), JQuery (second), JQuery Mobile (third). Your CSS file is loading last, therefore the styles are not being applied. Your code should look like this:

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

Also, you had a syntax error...there was a closed parenthesis and a double quote after the jquery-1.6.3.min.js file. I removed it. Your code should work just fine now.