jQuery Mobile：在完全加載時修改DOM以使頁面高度達到100％

我想在jQuery Mobile頁面中擴展內容區域，以便頁面填充視口的100％（頁眉+內容+頁腳= 100％）。我會假設當DOM完全加載時我必須做高度對齊，所以我有所有div的高度，然後我可以做類似的事情，如this。jQuery Mobile：在完全加載時修改DOM以使頁面高度達到100％

jQuery Mobile聲稱使用pageInit and not $(document).ready。 Unforunatelaty的DOM似乎沒有當pageInit被稱爲

var header = $("div[data-role='header']") 
console.log(header.height());

滿載告訴我的高度爲0。當我使用$（文件）。就緒相同的代碼（），它告訴我它是79px。

那麼最佳做法是什麼做對齊？

編輯：

Here是的jsfiddle顯示我的網頁的基本結構。我希望畫布填充頁眉和頁腳之間的整個空間。

來源

2012-03-28 zersaegen

我想你的情況下header = []。但是，我不明白這個問題，或者我不明白爲什麼需要JavaScript。你不能用簡單的CSS做到這一點嗎？

.header{height:20%} 
.content{height:60%} 
.footer{height:20%}

或類似

來源

2012-03-28 08:06:32 Gavriel

更改。只有當我使用絕對px值時，高度纔會改變。 – zersaegen 2012-03-28 08:23:10

如果您正在等待圖像（或其他外部資產）的東西，加載，那麼你需要直接綁定一個load事件處理程序的元素/資產或等待window.load事件，以便資產的維度是正確的。

或者，您可以提供資產指定的維度，例如，如果它是一個圖像，並且您知道這將是300px,200px，請將這些值設置爲屬性或CSS。這樣在window.load事件觸發之前就可以獲得正確的維度，並且這對jQuery Mobile頁面事件更好，因爲當頁面通過AJAX帶入DOM時，您無法等待window.load觸發。

如果您使用的是比1.1.0 RC1更早的版本，那麼我建議您檢查一下，它有CSS固定的頁腳，看上去/感覺很好，並且讓頁面始終顯示100％的高度。 http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download

來源

2012-03-28 12:21:00 Jasper

感謝您的建議。正如你已經提到的那樣，window.load事件不適用於我，因爲我想使用AJAX鏈接行爲。因爲我不知道尺寸，我不能使用你的第二個建議。當使用1.1.0 RC1時。我爲我的問題添加了一個jsFiddle，也許這有助於解決我的問題。 – zersaegen 2012-03-28 13:26:31

如果您的目標是填充頁眉和頁腳之間的空白，您是否考慮過獲得data-role="content"的高度？

來源

2012-03-29 20:49:58 user1091949

首先，創建「pageshow」事件對你的頁面：（它必須是「pageshow」事件而不是「pagebeforeshow」，因爲在第二種情況下，你不會得到高度 - 頁面是隱藏的）

// bind "pageshow" event to your page 
$("#PageID").live("pageshow", function (event, data) { 
    // do something...  
});

內此事件，請檢查您的頁眉，頁腳和頁面大小（與補白&邊距）：喜歡的東西：

var header_height = $("div[data-role=header]").height(); 
var footer_height = $("div[data-role=footer]").height(); 
var page_height = $("div[data-role=page]").height();

然後，計算並設置畫布的新尺寸：

$("#MyCanvas").css({"height":page_height - (header_height + footer_height)});

整個示例代碼：

// bind "pageshow" event to your page 
    $("#PageID").live("pageshow", function (event, data) { 
     var header_height = $("div[data-role=header]").height(); 
     var footer_height = $("div[data-role=footer]").height(); 
     var page_height = $("div[data-role=page]").height(); 

     $("#MyCanvas").css({"height":page_height - (header_height + footer_height)});  
    });

過程中的一些簡單的CSS將是確定的，但是當我使用內聯CSS以％爲我的頁眉，頁腳和內容DIV高度犯規應用和內容的高度犯規的

來源

2012-12-09 16:26:43 BorisD

jQuery Mobile：在完全加載時修改DOM以使頁面高度達到100％

回答

相關問題