Css 需要将移动广告单元固定在屏幕底部_Css_Mobile

Css 需要将移动广告单元固定在屏幕底部

css mobile

Css 需要将移动广告单元固定在屏幕底部,css,mobile,Css,Mobile,我正在尝试为我的网站的移动版本实现一个320x50移动广告。我希望广告的宽度是移动设备的整个宽度。然而，这则广告显示得很小，而不是我的iphone的整个宽度，它随着内容滚动我在我的网页中使用此代码来调用移动css <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" /> 我需要广告显示在屏幕的底部，即使在滚动时也要保

我正在尝试为我的网站的移动版本实现一个320x50移动广告。我希望广告的宽度是移动设备的整个宽度。然而，这则广告显示得很小，而不是我的iphone的整个宽度，它随着内容滚动

我在我的网页中使用此代码来调用移动css

 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />

我需要广告显示在屏幕的底部，即使在滚动时也要保持原样。任何想法都将不胜感激，谢谢

这是所要求的全部代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />

</head>

<body>


 <div id="mobileB">  
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- TWF_mobile_banner_adsense -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:50px"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="6479374699"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>


</body>
</html>

你确定你把这个CSS作为最重要的一个吗？广告现在有多大

如果您确定div的高度总是相同的，那么我也可以先将静态高度添加到div中。

您也可以共享您的html结构吗？这是必要的，因为它取决于您的div结构。CSS中有一种称为属性继承的东西，所以当您处理定位时，不仅要知道特定对象的属性，还要知道它的父对象

现在从我所看到的，我看不出有任何理由它不应该和内容一起滚动。我不是职业选手，但我认为你最好的机会是使用固定定位。根据您希望广告出现的位置，您必须设置特定的坐标。例如，如果您希望它显示在右上角，作为一种粘性div，您可以这样做：

position: fixed; 
top: 0px; 
right: 0px; 
z-index: 99; 
width:100%; 
height:50px;

对不起，我没有看到您提到需要将其放置在底部。在这种情况下，您可以这样做：

position: fixed; 
bottom:0;
left:0;
z-index: 99; 
width:100%; 
height:50px

在任何情况下，无论您决定什么以及您需要什么，您都应该能够通过使用上/下/左/右、位置：固定和z索引来实现：祝你好运

当我完全缩小网站时，广告很小。相对于728x90横幅，它的尺寸还不到Thathmm的一半。我试过这个，但广告仍然很小。而且它位于网页的最底部，所以必须滚动才能看到它。我认为问题在于我处理的是相对于桌面版本的大小。这意味着320宽的横幅不会占据整个屏幕的宽度。正如我所说，请用css发布与此特定DIV相关的整个HTML结构，这意味着包含广告DIV的每个DIV。问题可能就在那里。这里有一个可行的JSFIDLE：别忘了根据您的设备调整@media max width，我必须更改它，因为我无法在手机上测试它。如果它仍然不起作用，我会假设它是和adsense本身有关的，尽管它应该起作用。哦，对不起，我混合了绝对定位和固定定位。我在原来的帖子中更改了它，以防其他人遇到同样的问题。告诉我它是否有效。谢谢，但是广告仍然显示得很小…宽度只有手机屏幕的30%，高度非常小。是因为屏幕被放大了吗？

position: fixed; 
top: 0px; 
right: 0px; 
z-index: 99; 
width:100%; 
height:50px;

position: fixed; 
bottom:0;
left:0;
z-index: 99; 
width:100%; 
height:50px