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?

Answer 1

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

Answer 2

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

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