javascript 如何添加一个HTML元素来缩小视图的其余部分？

axr492tv 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(117)

我正在做一个小的firefox插件，它在屏幕底部添加了一个粘性页脚元素。
页脚栏应该是100%的屏幕宽度和~ 50 px的高度。我想使它的页脚栏的高度是从vh的视口/窗口（不知道正确的名称在这里），以便当一个网站加载，所有的内容加载以上的页脚栏。
我可以在大多数网站上用一个简单的50 px 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";

JavaScript

来源：https://stackoverflow.com/questions/75579951/how-to-add-an-html-element-that-shrinks-the-rest-of-the-viewport

2条答案

按热度按时间

ddhy6vgd1#

您是否尝试增加zIndex值？在某些情况下，人们使用非常高的zIndex值，请尝试

footer.style.zIndex = "9999999999999999";

或类似的。

赞(0）回复(0）举报 2023-02-28

drkbr07n2#

我猜问题可能出在布局上。如果网站没有一个合适的布局，页脚就会"随机"地附加在底部，而不考虑当前的元素。所以要么你想办法阻止它，要么你在网站上添加一个网格布局。
也许这对你有用：

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

来源：CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 如何添加一个HTML元素来缩小视图的其余部分？

2条答案

相关问题

热门标签

最新问答