Question

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

这是一个有效的解决方案，我在我的

中使用它

$("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/

我希望这就是你想要的。

Div内容跨越页面页脚的问题

1 个答案: