使用jquery在页面底部固定页脚

时间:2013-10-29 15:22:03

标签: jquery css twitter-bootstrap jquery-mobile

我的页脚有问题。我试图将页脚粘贴到页面底部

但是当我滚动页脚滚动到顶部时。喜欢它固定在页面上。在我的网站上,我使用jQuery,jQuery Mobile,bootstrap。

还有一个额外的页脚确实保持固定,但我不能写任何内容。

<div data-role="footer" class="ui-bar" data-position="fixed">
<p>footer</p>
</div>

示例m.alfanet.be

2 个答案:

答案 0 :(得分:1)

您的页面布局不正确,您错过了data-role='page'

的div

基本页面jquery移动布局:

<div data-role="page" id="foo">

    <div data-role="panel" id="mypanel">
       <a href="#doSomething">doSomething</a>
    </div><!-- /panel -->

    <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>      
        <a href="#popupBasic" data-rel="popup">Open Popup</a>
        <a href="#mypanel">Open panel</a>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->

    <div data-role="popup" id="popupBasic">
        <p>This is a completely basic popup, no options set.<p>
    </div>
</div>

的jsfiddle

http://jsfiddle.net/tronc/Sh6BF/

答案 1 :(得分:0)

您似乎正在设计手机网站(因为您正在使用jQuery Mobile)。

手机上的固定位置效果不佳。每个移动浏览器的固定元素的行为都会有所不同。

看看this great study by Brad Frost