How to have footer always at the bottom of page?

Question

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?

Waste

Try jsfiddle.net/9eYa8 if you mean your query is regarding HTML. – Endor

Thanks, my question was about jquery mobile. – Waste

Answer 1

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

Waste

This doesn't help me for the case when my page is longer than the mobile viewport. I would like the footer to be fixed for short content pages, but be at the very bottom of the content for longer pages, not overlayed on top of content. – Kitten

Answer 2

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

Slush

Thanks. Actually I've just found jquery mobile approach - <div data-role="footer" data-position="fixed"> – Waste

Answer 3

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

Intelligibility

Answer 4

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

Transitive