You can use some css to do it...
<div id="footer_id">Your footer content</div>
The css above will lock your footer to the bottome of the browser window. As long as your footer <div> is last in your html, it will float over the top of everything on your page when the page is scrolled. If it's not last in the html, you'll need to add a z-index to get it on top of your other content in the stack.
if the page is longer than the screen, it goes behind the footer,
Sounds to me like you're using a fixed footer. That's what fixed positioning does.
If you want the footer to flow naturally with the rest of your document, remove position:fixed.
from that, demo it seems mine already is a sticky/fixed footer.
yet on different screen the foot may end up 3/4 down the screen. ??
Do you have a link you could share?
Seeing the actual page will allow us to get a better idea of what you want and what's actually happening.
What's the URL so we can see what you see?