Question 44783 in Html Question posted in
Some basic documentation can be found here.

How to add an HTML element that shrinks the rest of the viewport?

I am making a small firefox addon that adds a sticky footer element to the bottom of the screen.

The footer bar should be 100% the width of the screen and ~50px in height. I want to make it where the height of the footer bar is removed from the vh of the viewport/window (not sure of the correct name here) so that when a website loads, all of the content loads above the footer bar.

I am able to do this on most sites with a simple 50px margin-bottom on the body element, but some sites that have floating elements, sidebars, or similar are still loading on top of the footer bar.

// CREATE THE FOOTER BAR
footer = document.createElement("div");

footer.style.backgroundColor = 'red';
footer.style.position = 'fixed';
footer.style.left = "0";
footer.style.right = "0";
footer.style.bottom = "0";
footer.style.width = "100%";
footer.style.height = "50px";
footer.style.zIndex = "100";

// APPEND FOOTER BAR TO DOM
document.body.append(footer);

// SHRINK VIEWPORT BY SIZE OF FOOTER
document.body.style.marginBottom = "50px";
Tags:

2

Answers


  1. 0

    Did you try to increase the zIndex value? In some cases people use very hight values of zIndex, Try

    footer.style.zIndex = "9999999999999999";

    or similar.

    Login or Signup to reply.
  2. 0

    I guess the problem might be the layout. If the site hasn’t got a proper layout, the footer will be appended "randomly" at the bottom without any regard of the current elements. So either you find a way to block it or you add a gridlayout to the site.

    Maybe this works for you:

    footer = document.createElement("div");

footer.style.backgroundColor = 'red';
footer.style.position = 'fixed';
footer.style.left = "0";
footer.style.right = "0";
footer.style.bottom = "0";
footer.style.width = "100%";
footer.style.height = "50px";
footer.style.zIndex = "100";

//Add Class to footer
footer.classList.add("footer");

// APPEND FOOTER BAR TO DOM
document.body.append(footer);

// SHRINK VIEWPORT BY SIZE OF FOOTER
document.body.style.marginBottom = "50px";
    body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

    Source: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search