CODEWITHSUNDEEP
jquerycssjquery-mobile
user2648752
user2648752

Reputation: 2221

Why the footer is not showing at the bottom of the page?

I am using jquery mobile and I am facing a problem. My footer is not showing in bottom. I want fix the footer at the bottom.

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 -->

Thanks

Upvotes: 0

Views: 125

Answers (2)

PSL
PSL

Reputation: 123739

That is because it has a relative position by default applied by jquery mobile styles. So it will just drop only below its content.

To add images and float them left on footer you can modify your markup a bit.

   <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>

and add rules:

.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

Based on the comment by @frequent, i realized that you can use data-* to get this. If you want to make it as fixed position you can use the data-position="fixed"(But this is different from absolute positioning) you can do.

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

and your css becomes

.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

Upvotes: 1

Scary Wombat
Scary Wombat

Reputation: 44824

How about changing your css for the footer to

position: absolute;
bottom: 10px;

Upvotes: 0

Related Questions