CSS - 页脚留在页面底部[重复]

I have a footer in my page and it although it goes at the bottom - it stays at the bottom of the screen and then is fixed there, so if i scroll down it stays half way down page.

below is what I have currently although I have tried loads of different things and searched on Google a lot!!

#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #00608F;
text-align: center;
}

Footer appears at bottom to start with but when I scroll Its stays in the same position...

</div>

You should use position:fixed

#footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #00608F;
    text-align: center;
    }

<footer id="footer">
  Footer
</footer>

</div>