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

Question

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";

How about : document.body.style.height = "calc(100vh - 60px)" before document.body.append(footer); // an extra 10px for good measure — medelito, Feb 27 '23 at 11:56

score 0 · Answer 1 · answered Feb 27 '23 at 12:15

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.

answered Feb 27 '23 at 12:15

Max

11
2

The issue isn't that things are 'on top' of my bar, but that I want them to not be that tall in the first place. Basically, I want to make it where the site doesn't even know that space where the footer bar is exists and loads everything in the space above the footer bar. Like, imagine how the page reacts when you turn on/off the bookmarks bar and everything adjusts based on the smaller/larger viewport.... thats what I want to do here. – Scott Wilkinson Feb 27 '23 at 12:18

Hi1mNico · Answer 2 · 2023-02-27T12:38:19.790

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

Hey, this doesn't work with all websites. Since this is an addon/extension, I'm not always able to know what the website I'm loading will do... I need a way to add a kind of wrapper around the so that no matter what the website does, it loads inside the wrapper without me needing to edit the body too much... — Scott Wilkinson, Feb 27 '23 at 13:14

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

2 Answers2