jQuery Mobile：將頁腳粘貼到頁面底部

Question

有沒有什麼辦法，考慮到jQuery Mobile框架的運行方式，修復頁面以便頁腳始終與頁面底部對齊 - 無論高度如何。

由於jQuery頁面的高度將會改變，特別是當設備被旋轉到縱向時，所以解決方案必須考慮到這一點。

只是澄清 - 我不需要腳註在視口的底部，只是工作，以便默認頁面高度不低於視口高度。

謝謝。

Answer 1

你可以在你的CSS文件中添加此：

[data-role=page]{height: 100% !important; position:relative !important;} 
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;} 

所以頁面數據角色現在有100％的高度，和頁腳是絕對位置。在iScroll插件 http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

希望你找到了答案 jQuery Mobile的：

而且Yappo已經寫了一個很好的插件，你可以在這裏找到！

的回答更新

您現在可以使用data-position="fixed"屬性，讓您的腳部構件上的底部。
文檔和演示：http://view.jquerymobile.com/master/demos/toolbar-fixed/

Answer 2

http://ryanfait.com/sticky-footer/

你可能使用和使用jQuery來更新元素的CSS高度，以確保它留在地方。

Answer 3

JQM提供：這些工作

• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html

無？

Answer 4

這個腳本似乎爲我工作...

$(function(){ 
    checkWindowHeight(); 
    $(document).bind('orientationchange',function(event){ 
     checkWindowHeight(); 
    }) 
}); 

function checkWindowHeight(){ 
     $('[data-role=content]').each(function(){ 
     var containerHeight = parseInt($(this).css('height')); 
     var windowHeight = parseInt(window.innerHeight); 
     if(containerHeight+118 < windowHeight){ 
      var newHeight = windowHeight-118; 
      $(this).css('min-height', newHeight+'px'); 
     } 
    }); 
} 

Answer 5

由於這個問題是慈祥的老人很多事情都變了。

您現在可以通過添加此頁腳DIV

data-position="fixed" 

更多的信息在這裏得到這樣的行爲： http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

另外要注意，如果你用新的JQM一起使用前面提到的CSS解決方案，你不會得到適當的行爲！

Answer 6

以下行工作得很好......

var headerHeight = $('#header').height(); 
var footerHeight = $('#footer').height(); 
var footerTop = $('#footer').offset().top; 
var height = (footerTop - (headerHeight + footerHeight)); 
$('#content').height(height); 

Answer 7

就我而言，我需要使用像這樣保持在底部牽制頁腳如果沒有太多的內容，但不浮在不斷的一切像data-position="fixed"似乎做的頂部...

.ui-content 
{ 
    margin-bottom:75px; /* Set this to whatever your footer size is... */ 
} 

.ui-footer { 
    position: absolute !important; 
    bottom: 0; 
    width: 100%; 
} 

Answer 8

添加數據位=「固定」並添加下面的風格在CSS會解決這個問題的z-index：1;

Answer 9

我想我會在這裏分享我的CSS唯一的解決方案。這樣你可以避免使用JS的額外開銷。

這不是一個固定位置頁腳。如果頁面內容比屏幕高，頁腳將不在屏幕上。我認爲這樣看起來更好。

正文和.ui-page最小高度和高度是防止頁腳在轉換過程中上下跳動所必需的。

作品與最新版本的JQM截至目前，1.4.0

body, 
.ui-page { 
    min-height:100% !important; 
    height:auto !important; 
} 

.ui-content { 
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */ 
} 

.ui-footer { 
    position:absolute !important; 
    width:100%; 
    bottom:0; 
} 

Answer 10

Fixed basics

若要能夠在頁眉或頁腳這種行爲， data-position="fixed"屬性添加到一個jQuery移動頁眉或頁腳 元素。

<div data-role="footer" data-position="fixed"> 
    <h1>Fixed Footer!</h1> 
</div>