javascript - Cookiebot 横幅覆盖带有印记的页脚部分

Question

我将 cookiebot 插件添加到我的 wordpress 系统中，现在我遇到了问题，即当横幅打开时，印记不可见。

我不希望横幅来自顶部。

我用这个试过：

.CybotCookiebotDialog {
margin-bottom: 368px;
}

但它没有出现。

谢谢！

维拉

Answer 1

TL;博士

您在一个类上设置样式，它应该是一个 div。您还在错误的元素上设置了样式，它应该是页脚。您的方法没有响应，因为横幅在不同的视口上有不同的高度。在答案4中，您会找到解决方案

---

嘿，

你有多个问题。

1.

Cookiebot div 有一个 ID，而不是一个名为CybotCookiebotDialog

所以你的代码会是这样的：

#CybotCookiebotDialog {
     margin-bottom: 368px;
}

---

2.

cookiebot div 是 adisplay: flex;并且计算是在没有填充的情况下完成的，这就是为什么你在那里没有结果，如果是，position: sticky;你将在 cookiebanner 下没有 368px。

---

3.

你想要的是footer放大，这样通知就不会超过你的印记。所以你需要根据自己的footer喜好来设计这个

footer {
     margin-bottom: 368px;
}

但请记住，这不是响应式的，并且在移动设备等上看起来不太好，因为此设备中的页脚通常高于桌面上的页脚。

---

4.回答

所以我很久以前就创建了这段代码，因为我遇到了同样的问题。

首先，我创建了一个像这样的元素作为结束前的最后一个footer元素

<div id="m-footer-spacer"></div>

请记住，您可以id自由选择它只是我使用的命名空间。

然后你添加这个js代码，它部分在jquery中，但你可以重构它。

document.addEventListener("DOMContentLoaded", function (event) {

if ($('#CybotCookiebotDialog:visible').length !== 0) {
    $("#m-footer-spacer").height($('#CybotCookiebotDialog').outerHeight());
}

});

function CookiebotCallback_OnDialogDisplay() {
    $("#m-footer-spacer").height($('#CybotCookiebotDialog').outerHeight());
}


function CookiebotCallback_OnLoad() {
    $("#m-footer-spacer").height(0);
}

CybotCookiebotDialog:visible：我检查横幅是否在初始页面视图中打开。

CookiebotCallback_OnDialogDisplay如果用户再次打开横幅以更改他的同意等，height则再次添加。

CookiebotCallback_OnLoad无论用户是否接受，都会在用户单击“确定”时触发。它用于将 div 设置回 0px；

如果你想有一个后备，你可以在<noscript>标签中添加样式，请记住，只有在 html5 中才能<noscript>在head

我故意没有使用$('document').ready(function(){});因为我在 cookiebot 和这个函数上有一个错误。不知道现在修好了没有。

---

我希望它可以帮助你。:)