[英]Limit footer height to 100px with Google responsive add
I have a website with a google map on it which I am trying to place a google ad at the bottom on a footer that can eventually be dismissed.我有一个带有谷歌地图的网站,我试图在它的底部放置一个谷歌广告,最终可能会被关闭。 Right now I am struggling with holding the height of the footer to 100px once I put a responsive ad sense ad in it.
现在,一旦我将响应式广告感知广告放入其中,我就很难将页脚的高度保持在 100 像素。
I tried following the google Adsense api with this:我尝试使用以下 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>
But it keeps jumping up much larger than 100px.但它一直跳得比 100 像素大得多。 You can see the code live here: https://www.seekadventure.net/adventureMap2.html
你可以在这里看到代码: https : //www.seekadventure.net/adventureMap2.html
The ads script appears to do two things:广告脚本似乎做了两件事:
.footer
with height: auto !important
.footer
用height: auto !important
覆盖.footer
上的内联样式 What you could do is place !important
after each of your style declarations (for example:您可以做的是将
!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; } }
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.虽然这确实解决了页脚大小问题,但它创建了一个不同的问题:在只有 100
100px
高的页面不动产中显示添加 - 这似乎是脚本首先覆盖宿主元素height
值的原因。
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.另一种方法是使页脚的背景透明。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.