I was able to create an always on the bottom footer using code from Codepen.
Here is the HTML:
<div class="content">
<header>
<p>blabla</p>
</header>
<main>
<p>blaBlabla blub</p>
</main>
</div>
<footer>
<p>more bla</p>
</footer>
As for the CSS:
*{
margin: 0;
padding: 0;
border: 0;
}
html{
height: 100%;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 250px;
min-height: 100%;
background-color: white;
}
.content {
margin: 0 auto;
width: 100%;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: black;
color: white;
text-align: center;
}
The issue I encountered was that the code worked fine when the page was called with "file:///C:/xampp/htdocs/folder/index.html" but not when it was called with "http://localhost/folder/index.html". I hope someone can provide me with a solution as I am quite frustrated with this problem.