手機網站移動廣告固定懸浮在頁面底部的AdSense廣告代碼 DIV實現

1. <style type="text/css">
   
2. html,body{height:100%;margin:0;padding:0;}
   
3. #bottomDiv{ /*Code for Moz, Opera, etc.*/
   
4. height:50px;
   
5. width:100%;
   
6. background:#9bb;
   
7. position:fixed;
   
8. bottom:0;
   
9. }
   
10. #scaleDiv{
    
11. position:absolute;
    
12. visibility:hidden;
    
13. height:100%;
    
14. }
    
15. </style>
    
16. <!--[if IE]>
    
17. <style type="text/css"> /*IE-specific markup*/
    
18. #bottomDiv{
    
19. position:absolute;
    
20. top:expression(offsetParent.scrollTop + (document.getElementById("scaleDiv").offsetHeight-50));
    
21. }
    
22. </style>
    
23. <![endif]-->
    
24. 
    
25. 
    
26. <div id="scaleDiv">
    
27. <!-- this div is to find browser page display height -->
    
28. </div>
    
29. <div style="font:4em Verdana;padding-bottom:2em;"><!-- bottom padding allows content to clear on scroll -->
    
30. hello hello<br/>
    
31. hello hello<br/>
    
32. hello hello<br/>
    
33. hello hello<br/>
    
34. hello hello<br/>
    
35. hello hello<br/>
    
36. hello hello<br/>
    
37. hello hello<br/>
    
38. hello hello<br/>
    
39. hello hello<br/>
    
40. hello hello<br/>
    
41. hello hello<br/>
    
42. hello hello<br/>
    
43. hello hello<br/>
    
44. hello hello<br/>
    
45. hello hello<br/>
    
46. hello hello<br/>
    
47. hello hello<br/>
    
48. hello hello<br/>
    
49. hello hello<br/>
    
50. 
    
51. 
    
52. 
    
53. </div>
    
54. <div id="bottomDiv">
    
55. <p style="text-align: center; color: white">I am here</p>
    
56. </div>

複製代碼

移動互聯網時代，google增加了自適應的廣告，移動適配屏幕尺寸成為主流，一直在底部顯示的廣告能增加廣告點擊率，很多移動站點都使用了這個功能
如果不想修改整個代碼，可以結合JS代碼來調用這個樣式

測試了下 通過一段代碼也可以實現 不需要在head中 直接在body中使用 大家可以再測試下不同手機瀏覽器的兼容性問題

桌面瀏覽器在線測試工具：

1. http://www.w3school.com.cn/tiy/t.asp?f=html_style

複製代碼

測試了一段簡潔的代碼：

1. <div style="height:60px; width:100%; position:fixed; bottom:0; background:#9bb;">
   
2. <p style="text-align: center; color: white">I am here</p>
   
3. </div>

複製代碼