I'm trying to having a sticky footer using HTML and CSS over my computer, but if i scroll my page the footer goes bouncing.
The page is strubctured like this
<html>
<head></head>
<body>
<div class="a"></div>
<div class="footer"></div>
</body>
</html>
Here my CSS:
body {
background-color: green;
}
.a {
margin-bottom: 100px;
}
.footer {
height:100px;
background-color: black;
color: rgba(255, 255, 255, .5);
position: fixed; bottom: 0px;
text-align: center;
width: 100%;
padding: 20px 0;
margin: 0;
}
That's the footer in normal condition. It's sticky.
But if I scroll the page since the end the footer goes up for a while and i see the background.
It happens also in https://stackoverflow.com You can see it also in this page.
Scroll the page since the end and the footer of stackoverflow.com goes up for a while
Someone that knows how to solve it?