Stačí 5 řádků CSS a patička bude fixně na konci stránky bez ohledu na to, jestli obsah nad ní vyplní celý prostor
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
footer{
margin-top: auto;
background: green; /* není potřeba, pouze zvýrazňuje pozici patičky */
}
</style>
</head>
<body>
<!--
Každý element, jehož první nadřazený prvek je <body>,
podléhá pravidlu display: flex;
-->
<div>
<h1>Nadpis</h1>
<p>Odstavec</p>
</div>
<footer>
Patička na konci stránky
</footer>
</body>
</html>