CODEWITHSUNDEEP
jquery-mobilesticky-footer
LA_
LA_

Reputation: 20409

How to have footer always at the bottom of page?

My page doesn't contain a lot of information, so footer is displayed somewhere in the middle of the page. How can I have that always at the bottom?

Upvotes: 8

Views: 12179

Answers (4)

ArcadeRenegade
ArcadeRenegade

Reputation: 893

This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.

The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.

Works with the latest JQM version as of now, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

Upvotes: 3

codercat
codercat

Reputation: 23271

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

Upvotes: 0

LA_
LA_

Reputation: 20409

jquery mobile approach - <div data-role="footer" data-position="fixed">

Upvotes: 20

Mircea Soaica
Mircea Soaica

Reputation: 2817

{
  potition: absolute;
  bottom: 0;
  width: 100%;
  height: some_height;
}

Upvotes: 3

Related Questions