1

在这里快速提问。我一直试图让我的代码的内容部分将页面填充到页脚。我尝试将以下 hack 添加到内容类型 padding-bottom: 5000px margin-bottom: -5000px; 的 css 中。我也遵循了本指南，但没有得到我想要的结果。这是正在发生的事情的屏幕截图：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>

4

1 回答 1

1

这是一个可行的解决方案，我在我的

$("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);
    } 
});

这是一个工作示例：http: //jsfiddle.net/Gajotres/BYufW/

我希望这是你想要的。

于 2013-01-18T21:44:57.757 回答