While working on my website, I attempted to create a sticky footer. To achieve this, I used JavaScript to dynamically generate the <footer> element in order to keep it at the bottom of the page at different screen widths.
My goal was to append the footer directly to the body using the following JavaScript code:
$(function () {
$('.products').each(function(i, obj) {
if (i > 0) {
obj.id = "p" + i
var pl = document.createElement("footer");
var t = document.createTextNode(i);
pl.className = "pageblock"
pl.appendChild(t);
document.body.appendChild(pl);
}
});
});
This script successfully creates a single footer and styling the .pageblock class is effective.
In an attempt to position the footer at the bottom, I added the following CSS:
.pageblock {
clear: both;
position: relative;
text-align: center;
bottom: 0;
z-index: 10;
font-family: 'Lato';
font-size: 3em;
color: white;
font-weight: bold;
}
However, despite my efforts, the footer remained vertically centered rather than at the bottom. You can see the issue here.
Since my website uses a flex layout, elements scale both horizontally and vertically with the browser size.
Is there a way to consistently position the footer at the bottom, regardless of the vertical size of the page? Can this be achieved without restructuring the entire code with a single div container?
Thank you!