Setting the height to 100% on my web page is messing things up. The footer is not staying on the main page, it’s going past the main viewable area…. how do I prevent this from happening so that it stays on the bottom of the page?
see example: [URL_REMOVED]
Try putting the footer inside the
<div id="bdy"></div>and positioning it on the bottom.Since the
#bdyhasmin-height: 100%, it pushes the footer down.If you place the footer inside the
#bdy, give it the styleposition: absolute; bottom: 0;.UPDATE:
Ah, that is because the
position: absolute;on the footer makes the instructionbottom: 0;stick it to the closest ancestor which does have notposition: static(which is default). You can fix the issue by applyingposition: relative;to#bdy.