jquery - 固定图像的位置

Question

我正在点击链接创建页眉和页脚，并根据图像的大小在页眉和页脚之间放置图像。

link is http://jsfiddle.net/Gajotres/yndsW/ 

但问题是页眉和页脚之间的图像垂直滚动。 我怎样才能避免它并将它固定到中心？

Answer 1

看看我的另一种方法。我没有使用 img 标签，而是决定使用背景图片并让 css 来处理居中。仅需要 Javascript 来动态更改图像。

我们仍然需要 javascript 来固定我们的页面高度。我已将工作元素邮寄给您。

HTML :

<div data-role="page" id="Windage">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3>Header</h3>
    </div>


    <div data-role="content">

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            <a href="#" data-role="button" data-inline="true" data-transition="slide">NEXT</a>
        </h3>
    </div>
</div>

CSS:

html,body{
    height:100%;
}

.ui-content {
    background-repeat:no-repeat;
    background-size:contain;  
    background-position: center center;
}

Javascript:

$(document).on('pageshow', '#Windage', function(){       
    $('[data-role="content"]').height(getRealContentHeight());
    $('.ui-content').css('background-image','url(Image/timer.png)');    
});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("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());
    } 
    return content_height;
}

我还对您的主要元素类做了一些小改动:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.setIntegerProperty("loadUrlTimeoutValue", 360000); 
    super.loadUrl("file:///android_asset/www/index.html");      
}