使用 JavaScript 的底部边距

Question

如何将此按钮放置在距离底部 100px 的位置？我尝试使用 CSS 将此代码放在 div 和 position:absolute 中； bottom:100px;但它不起作用... 我猜这必须用 JavaScrip 来实现......？有人可以帮忙吗？

<!-- WhatsHelp.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            facebook: "...", // Facebook page ID
            whatsapp: "...", // WhatsApp number
            call_to_action: "Contacte-nos ", // Call to action
            button_color: "#A8CE50", // Color of button
            position: "right", // Position may be 'right' or 'left'
            order: "facebook,whatsapp", // Order of buttons
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>
<!-- /WhatsHelp.io widget -->

Answer 1

我认为你不需要 JavaScript。

您是否尝试过使用 position: fixed 而不是 position: absolute？

这应该足够了：

position: fixed;
bottom: 0;

示例（来自 W3School）：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

Answer 2

我做了个例子https://jsbin.com/rujelobexo/edit?html,css,js,output

因为此脚本会在您的页面中插入标记，所以您可以使用 CSS:

设置样式

#wh-widget-send-button.wh-widget-right {
    bottom: 100px!important;
}

ID + class 规则是必需的，因为你的脚本已经用 !important:

注入底部属性

#wh-widget-send-button {
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    z-index: 16000160 !important;
    bottom: 0 !important;
    ...
}

使用 JavaScript 的底部边距

Margin bottom using JavaScript

javascript

css

positioning

widget