Question

EDIT: using position:fixed for pageHeader, pageBody, and pageFooter
(and then correcting their positions) did it for me. Thanks guys!

I’m working on an Android web application using HTML and CSS. I currently have this:

#container {
 min-height:100%;
 position:relative;
}

#pageHeader {
 color:<%=foreColor%>;
}

#pageBody {
 padding-bottom:100px;
}

#pageFooter {
 position:static;
 clear:both;
 bottom:0;
 height:5%;
}

I managed to stick the footer to the bottom of the page using this, but when the body gets longer than the page height, the footer doesn’t scroll down to the bottom of the page (it sticks to the bottom of the page height) therefore part of the body that is lower than the screen overlaps it.

I’m using this HTML structure:

<div id="container">
  <div id="pageHeader"></div>
  <div id="pageBody"></div>
</div>
<div id="pageFooter"></div>

[I also have a header, body, footer ids within pageBody if that affects anything]

Answer 1

Ryan Faits CSS Sticky footer has long been the standard way of achieving a sticky footer.

http://ryanfait.com/sticky-footer/

Unless I’m misunderstanding you and you want to make a fixed footer (where it would be at the bottom of the screen all the time)

In which case just set position:fixed instead of static