Flexbox 导致 adsense 错误：“adsbygoogle.push() 错误：没有可用宽度 = 0 的插槽大小”答案

【问题标题】：Flexbox causes adsense error: "adsbygoogle.push() error: No slot size for availableWidth=0"Flexbox 导致 adsense 错误：“adsbygoogle.push() 错误：没有可用宽度 = 0 的插槽大小”
【发布时间】：2016-08-25 14:56:18
【问题描述】：

我有一个网站，它使用 angular-material 和 flexbox 进行布局。我试图在这些 flexbox 容器之一中包含一个 Google Adsense sn-p，但它给了我错误：“adsbygoogle.push() 错误：availableWidth=0 没有插槽大小”。但是，如果我将相同的 sn-p 放在 flexbox 容器之外，它可以正常运行。

这并不理想，因为我的整个网站都是用 flexbox 制作的。所以我想找到一种方法在 flexbox 容器中完成这项工作。

这是我的代码的 sn-p：

    <div layout="column" layout-align="center center" layout-padding="" flex="flex" class="scroller container">
      <div flex="" hide-xs="" show-gt-xs="">
        <h1>My Account</h1>
      </div>
      <welcome></welcome>
      <script async="" defer="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- responsive ad-->
      <ins flex="grow" style="width:100%;min-width:100px;height:100px;" data-ad-client="ca-pub-IDISHEREONMYSITE" data-ad-slot="IDISHEREONMYSITE" data-ad-format="auto" class="adsbygoogle"></ins>
      <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            (adsbygoogle = window.adsbygoogle || []).push({})
        });
      </script>
    </div>

我还尝试将谷歌广告中对 flex 的所有引用替换为 display:block;我试过使用宽度，没有宽度，最小宽度，最大宽度，所有这些都在一起。我试过把它包裹在一个 div 中，它是一个 flexbox 列，我试过把它放在一个 div 中，它是 display:block;具有固定宽度等。

似乎都不起作用。

有什么想法吗？

有没有办法向 Google 报告这个（可能的）错误？

【问题讨论】：

标签： javascript css flexbox angular-material adsense

【解决方案1】：

您需要在 px 而不是 % 中定义您的 width。

试试看here，它可能对你有帮助。

【讨论】：

这真的不太理想，这不是违背了自适应广告的全部目的吗？
这是一种解决方法；我已经使用了 max-width 并且它也可以工作

【解决方案2】：

我刚遇到这个问题，来寻求帮助。

仅查找有关设置固定宽度的信息（在 PX 中？）。

我知道这不正确，我目前有一个宽度为 90% 的盒子并且工作正常。

让我烦恼的一件事是在更大的显示器上，谷歌广告从不居中。

我尝试将其转换为 flexbox 以对齐内容，这就是我的问题开始的地方。

我通过设置 setTimeOut 和 addclass 解决了这个问题。

    function centerAd() {
     $( "#adBlock" ).addClass( "adBlock" );
    }

    var timeoutID;
$(function() {
     timeoutID = window.setTimeout(centerAd, 1000);
})

与班级：

.adBlock {display: flex; justify-content:center; align-items:center; align-content:center} /* We call this after page has loaded to center ad */

它给了谷歌广告足够的时间来嗅探元素的宽度，然后很好地居中。通常是无缝的。

【讨论】：

【解决方案3】：

Adsense 的响应式代码根据其所在的父元素的宽度确定其插入的 iframe 的宽度。通常这可以正常工作，因为即使父元素还没有内容，它仍然有一个宽度，因为它填充了可用宽度。

但是，如果您的父元素位于根据内容确定其成员宽度的 flexbox 行中，则在添加内容之前，其宽度将为零。因此，除了 Adsense 代码之外，框中没有其他内容，在 Adsense 计算可用宽度时，它为零。

您需要通过将框设置为具有除自动之外的 flex 基础，或将宽度或最小宽度属性应用于框来解决此问题，以便在 Adsense 运行其代码之前的初始状态下，它'会有一个非零宽度。

所以在特定的 flex 成员上，要么设置自动以外的 flex 基础（例如百分比或 px）

flex: 1 0 30%

或者设置一个宽度或最小宽度

min-width: 30%

当唯一的内容是 Adsense 广告时，您不能使用根据内容确定宽度的 flex 基础，因为该广告是随后由 JavaScript 插入的。

【讨论】：