如何添加缩小视口其余部分的 HTML 元素？

Question

我正在制作一个小的 firefox 插件，它在屏幕底部添加了一个粘性页脚元素。

页脚栏应为屏幕宽度的 100%，高度约为 50 像素。我想将页脚栏的高度从视口/窗口的 vh 中移除（此处不确定正确的名称），以便在加载网站时，所有内容都加载到页脚栏上方。

我可以在大多数网站上使用简单的 50px margin-bottom 在 body 元素上执行此操作，但一些具有浮动元素、侧边栏或类似元素的网站仍在页脚栏的顶部加载。

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