How to fix a footer at the bouttom of the page

Using Streamlit
1

Hi,
I’m trying to set a footer in my application I tried this code :

footer="""<style>
a:link , a:visited{
color: blue;
background-color: transparent;
text-decoration: underline;
}

a:hover,  a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;

color: black;
text-align: center;
}
</style>
<div class="footer">
<p>©Copyright CareSentinel</a></p>
</div>
"""
st.markdown(footer,unsafe_allow_html=True)

but when I scroll down I see this drawback :
image

how can I make the footer fix please ?