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

Question

我有一个网站，上面有一张 google 地图，我正试图在底部的页脚上放置一个 google 广告，最终可以将其关闭。现在，一旦我在其中放置了响应式广告，我就很难将页脚的高度保持在 100px。

我尝试通过以下方式关注 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>

但它一直跳起来比100px大很多。您可以在此处查看代码：https://www.seekadventure.net/adventureMap2.html

Answer 1

The ads script appears to do two things:

it overwrites your inline styling on your .footer with height: auto !important
it contains inline styling on the add itself.

What you could do is place !important after each of your style declarations (for example:

.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; } }

While this does solve the footer sizing problem, it creates a different one: displaying the adds in a page real-estate only 100px tall - which appears to be the reason why the script overwrites the host element's height value in the first place.

One thing you could do to improve this is:

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

Another would be to make the footer's background transparent.

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

Limit footer height to 100px with Google responsive add

html

javascript

css

adsense