Question

我正在使用JQM 1.4构建一个Android应用程序，该应用程序正在使用PhoneGap 3.3。我遇到的问题是页脚没有显示。标题？完全没问题。这是我index.html：

中的一个页面

<div data-role="page" id="eventPage"> <!-- Start Event Page -->
    <div data-role="header" id="mainhead" data-position="fixed" data-theme="b">
            <div class="ui-btn-left" id="home"><a href="#home"><img src="img/Home.png" width="25" height="25"/></a></div>
            <h1 id="event-title">Title of Mobile App</h1>
     <div id="backevent" class="ui-btn-right"><a href="#" onClick="previous_event()"><img src="img/backbtn.png" width="25" height="25"/></a></div>
     <div id="nxtevent" class="ui-btn-right"><a href="#" target="_blank" onClick="next_event()"><img src="img/NextBtn.png" width="25" height="25"/></a></div>


    </div>
    <div data-role="content">
        <div id="page-title"></div>
        <div id="page-region"></div>
        <a href="#" onClick="Calendar_Add()" class="ui-btn ui-btn-inline">Add to Calendar</a>
        <div id="page-content"></div>

    </div> 

    <div id="eventFooter" data-role="footer" data-theme="d" data-position="fixed">

    </div>
</div><!-- End eventPage -->

我首先将data-position="fixed"添加到不起作用的页脚。

然后我尝试了：

#eventFooter {  
    background:#0B436F;
    color:#FFF;
    position:absolute
}

哪个不起作用，所以我尝试用position:fixed代替position:absolute，但这也无效。

我觉得很奇怪，标题显示没有错误，但页脚没有相同的编码？有什么建议吗？

解决方案：

我接受了Omar的建议并升级到JQuery Mobile 1.4.2并将我的代码修改为

<div id="footer" data-role="footer" data-position="fixed">
        <h1></h1>
</div>

我对这个-color的CSS无关紧要，所以你知道要删除其他东西。

#footer {   
    background:#0B436F;
    color:#FFF; 
}

现在似乎工作得很好。

Answer 1

除非您的代码高于不完整，否则您需要添加一些绝对位置的参数：

#eventFooter {  
    background:#0B436F;
    color:#FFF;
    position:absolute;
    bottom: 0;
    left: 0;
}

JQM 1.4固定页脚不显示

1 个答案: