Question

我正在尝试调整下面代码段的高度。目前，当弹出窗口从下面的JS代码中出现时，它被我们网站上的另一个元素隐藏，因此我想增加下面代码元素的高度，使其高于另一个元素。

该代码目前在outpostmagazine.com上，您可以看到人们无法点击提交，因为弹出窗口位于共享栏后面。

<!-- Qualaroo for outpostmagazine.com -->
<!-- Paste this code right after the <body> tag on every page of your site. -->
<script type="text/javascript">
  var _kiq = _kiq || [];
  (function(){
    setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';
    s.async = true; s.src = '//s3.amazonaws.com/ki.js/51645/a-r.js'; f.parentNode.insertBefore(s, f);
    }, 1);
  })();
</script>

Answer 1

使用css调整元素margin-bottom似乎是一个不错的选择，尽管如果用户点击侧边栏中的箭头并使其垂直，您将有一个间隙，例如http://cl.ly/TFqL

尝试在js代码之前添加它：

<style type="text/css">
    html div#ki_container {
        margin-bottom: 35px;
    }
</style>

Answer 2

我认为这不是一个问题。这是一个CSS问题。我使用Chrome检查了您的网页。

只需将此属性添加到div＃ki_container：

的css中

html div#ki_container { 
margin-bottom: 40px;
(...)
}

如果您有权访问此工具栏的css（如果您是Qualaroo），请直接在此处添加。如果没有，您可以在自己的css文件中覆盖它。它将解决您的问题，并在其他共享按钮上方显示您的容器，您可以单击“发送”按钮。

Answer 3

好的，将此部分添加到您的脚本中：

(function addMarginBottom() {
    var container = document.getElementById('ki_container');
    container.style.marginBottom = '40px';
})();

这样的事情：

<!-- Qualaroo for outpostmagazine.com -->
<!-- Paste this code right after the <body> tag on every page of your site. -->
<script type="text/javascript">
  var _kiq = _kiq || [];
  (function(){
   setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';
s.async = true; s.src = '//s3.amazonaws.com/ki.js/51645/a-r.js'; f.parentNode.insertBefore(s, f);
    }, 1);
 })();



(function addMarginBottom() {
    var container = document.getElementById('ki_container');
    container.style.marginBottom = '40px';
})();

</script>

调整JS元素的高度

3 个答案: