For modern browser, you can use flex
layout to ensure the footer stays at the bottom no matter the content length (and the bottom won't hide the content if it is too long)
HTML Layout:
<div class="layout-wrapper">
<header>My header</header>
<section class="page-content">My Main page content</section>
<footer>My footer</footer>
</div>
CSS:
html, body {
min-height: 100vh;
width: 100%;
padding: 0;
margin: 0;
}
.layout-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.layout-wrapper > .page-content {
background: cornflowerblue;
color: white;
padding: 20px;
}
.layout-wrapper > header, .layout-wrapper > footer {
background: #C0C0C0;
padding: 20px 0;
}