Div內容跨頁面頁腳的問題

快速問題在這裏。我一直試圖讓我的代碼的內容部分填充頁面到頁腳。我試圖添加以下hack到內容類型padding-bottom的css：5000px margin-bottom：-5000px;我也遵循這個指南，但我沒有得到我期待的結果。這裏是正在發生的屏幕截圖： http://img.photobucket.com/albums/v189/shadowtyper/screenshotIssue_zpse858c39a.gif Div內容跨頁面頁腳的問題

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

來源

2013-01-18 user1857654

「下到頁腳」是否意味着您想讓較低的藍條位於視口的下邊緣？什麼指導？我們需要一些CSS或示例頁面來提供很多幫助。 – isherwood

首先嚐試設置您的內容的高度爲100％;如果你的模擬器沒有結果，你可以設置一些背景。 –

下面是一個有效的解決方案，我用它在我的

$("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-18 21:44:57 Gajotres

從jQuery 1.7開始，'.live（）'方法已被棄用。使用'.on（）'附加事件處理程序。老版本的jQuery用戶應該使用'.delegate（）'而不是'.live（）'。 –

這很好用！感謝您及時的回覆！ – user1857654

Div內容跨頁面頁腳的問題

回答

相關問題