0

我正在使用 jquery mobile，但遇到了问题。我的页脚没有显示在底部。我想在底部修复页脚。

http://jsfiddle.net/ravi1989/xTpfE/

<div data-role="page" id="foo">
    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->

谢谢

4

2 回答 2

1

那是因为它具有默认情况下由 jquery 移动样式应用的相对位置。所以它只会低于它的内容。

要添加图像并将它们浮动在页脚上，您可以稍微修改您的标记。

   <div class="customFooter" data-role="footer">
        <div class="wrapper">
            <img src="http://placehold.it/32x32" />
            <img src="http://placehold.it/32x32" />
        </div>
         <h4>Page Footer</h4>

    </div>

并添加规则：

.customFooter {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: #dedede;
}
.customFooter h4 {
    float:right;
}
.customFooter .wrapper {
    position: absolute;
    top: 50%;
    height: 32px;
    margin-top: -16px;
}

演示

根据@frequent 的评论，我意识到您可以使用 data-* 来获得它。如果你想让它成为固定位置，你可以使用data-position="fixed"（但这与绝对定位不同）你可以做到。

 <div class="customFooter" data-position="fixed" data-role="footer">

你的CSS变成

.customFooter {
    background: #dedede;
}
.customFooter h4 {
    float:right;
}
.customFooter .wrapper {
    position: absolute;
    top: 50%;
    height: 32px; /*height of the image*/
    margin-top: -16px; /*-ve value of half the height*/
}

小提琴

于 2013-10-11T01:18:03.053 回答
0

如何将页脚的 CSS 更改为

position: absolute;
bottom: 10px;
于 2013-10-11T01:17:10.917 回答