时间戳

首页 > 解决方案 > 使用 Google 响应式添加将页脚高度限制为 100 像素

javascript - 使用 Google 响应式添加将页脚高度限制为 100 像素

问题描述

我有一个网站，上面有一个谷歌地图，我试图在页脚底部放置一个谷歌广告，最终可能会被解雇。现在，一旦我将响应式广告感知广告放入其中，我正在努力将页脚的高度保持在 100 像素。

我尝试使用以下 google Adsense api：

     <div class="footer" style="height:100px !important">

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>          
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Anchor Ad -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-3213091474519287"
     data-ad-slot="6029013039"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>

但它一直跳得比 100 像素大得多。你可以在这里看到代码：https ://www.seekadventure.net/adventureMap2.html

标签： javascripthtmlcssadsense

解决方案

广告脚本似乎做了两件事：

  • 它会覆盖你的内联.footer样式height: auto !important
  • 它包含 add 本身的内联样式。

您可以做的是!important在每个样式声明之后放置（例如：

.example_responsive_1 { width: 320px; height: 100px !important; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px!important; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px !important; } }

虽然这确实解决了页脚大小问题，但它创建了一个不同的问题：仅在页面房地产中显示添加内容100px- 这似乎是脚本height首先覆盖主机元素值的原因。

您可以做的一件事是：

.example_responsive_1 {
  transform: scale(calc(10/28));
  transform-origin: top;
}

另一种方法是使页脚的背景透明。

推荐阅读