Ограничьте высоту нижнего колонтитула до 100 пикселей с помощью адаптивного добавления Google - PullRequest
Новая
       6

Ограничьте высоту нижнего колонтитула до 100 пикселей с помощью адаптивного добавления Google

1 голос
/ 02 февраля 2020

У меня есть веб-сайт с картой Google, на котором я пытаюсь разместить объявление Google внизу в нижнем колонтитуле, которое в конечном итоге может быть отклонено. Прямо сейчас я пытаюсь удержать высоту нижнего колонтитула до 100 пикселей, как только я добавлю в него рекламу с отзывчивым смыслом.

Я пытался следовать API Google Adsense с этим: 

     <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

1 Ответ

1 голос
/ 02 февраля 2020

Сценарий ads, кажется, выполняет две вещи:

  • он перезаписывает ваш встроенный стиль на вашем .footer с помощью height: auto !important
  • , он содержит встроенный стиль на самом добавлении.

Что вы могли бы сделать, это поставить !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;
}

Еще одна задача - сделать фон нижнего колонтитула прозрачным.

...