Question

Quick question here. Ive been trying to get my content section of my code to fill the page down to the footer. Ive tried to add the following hack to the css for the content type padding-bottom: 5000px margin-bottom: -5000px; Ive also followed this guide but I didnt not get the result I was looking for.
Here is a screen shot of what is happening:
http://img.photobucket.com/albums/v189/shadowtyper/screenshotIssue_zpse858c39a.gif

<div data-role="page" id="Ids" data-theme="a">
<div data-role="header" data-theme="b">
    <h1>Accepted Orders
    </h1>
    <a href="#page" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right"></a>
</div>

<div data-role="content">
        <ul data-role="listview" data-inset="true" id="idsContent" data-theme="a">
            <li><a href="#somediv"> ID #12345678</a></li>
            <li><a href="#somediv"> ID #12345678</a></li>
        </ul>
</div>
   <div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b">
    <p>footer</p>    
</div>

Answer 1

Here’s an working solution, I am using it in my

$("div[data-role='page']").live('pageshow',function(e,data){    
    var header = $("div[data-role='header']:visible");
    var footer = $("div[data-role='footer']:visible");
    var content = $("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
        content.height(content_height);
    } 
});

And here’s an working example: http://jsfiddle.net/Gajotres/BYufW/

I hope this is what you want.