使用 Google 響應式添加將頁腳高度限制為 100 像素

Question

我有一個帶有谷歌地圖的網站，我試圖在它的底部放置一個谷歌廣告，最終可能會被關閉。 現在，一旦我將響應式廣告感知廣告放入其中，我就很難將頁腳的高度保持在 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

Answer 1

廣告腳本似乎做了兩件事：

• 它.footer用height: auto !important覆蓋.footer上的內聯樣式
• 它包含添加本身的內聯樣式。

您可以做的是將!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; } }

雖然這確實解決了頁腳大小問題，但它創建了一個不同的問題：在只有 100 100px高的頁面不動產中顯示添加 - 這似乎是腳本首先覆蓋宿主元素height值的原因。

你可以做的一件事是：

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

另一種方法是使頁腳的背景透明。