Question

我正在使用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 -->

由于

Answer 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;
}

<强> Demo

基于@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*/
}

<强> Fiddle

Answer 2

如何将页脚的css更改为

position: absolute;
bottom: 10px;

为什么页脚没有显示在页面底部？

2 个答案: