Solution 1 :

I guess its not a good idea to manipulate DOM-elements with JS at the page load event. Better use CSS to do the trick:

How to make a sticky footer using CSS?

Solution 2 :

If you do it in CSS you shouldn’t have this issue, plus it’s very few lines of code, I made a quick mock-up as an example.






 header {
   height: 10vh;
   min-height: 60px;


 main {
    height: 70vh;
    min-height: 800px;

  footer {
    height: 20vh;
    min-height: 200px;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;

Problem :

I was looking for an sticky footer and I found this

It’s pretty useful but the problem is when I refresh the page the footer appears on the top first and 1 second after it takes the right place at the bottom, it’s there’s way to avoid that? I mean when I refresh the page the footer appears at the bottom as it should be?

window.addEventListener("load", activateStickyFooter);
function activateStickyFooter() {
  window.addEventListener("resize", adjustFooterCssTopToSticky);

function adjustFooterCssTopToSticky() {
  const footer = document.querySelector("#footer");
  const bounding_box = footer.getBoundingClientRect();
  const footer_height = bounding_box.height;
  const window_height = window.innerHeight;
  const above_footer_height = - getCssTopAttribute(footer);
  if (above_footer_height + footer_height <= window_height) {
    const new_footer_top = window_height - (above_footer_height + footer_height); = new_footer_top + "px";
  } else if (above_footer_height + footer_height > window_height) { = null;

function getCssTopAttribute(htmlElement) {
  const top_string =;
  if (top_string === null || top_string.length === 0) {
    return 0;
  const extracted_top_pixels = top_string.substring(0, top_string.length - 2);
  return parseFloat(extracted_top_pixels);


Comment posted by Heretic Monkey

Use CSS to set the position to the bottom? This can likely be all done via CSS anyway, but if this is how you want to do it, that’s fine too.