Google Adsense自动广告中摩天大楼广告溢出父Div的移动端问题

问题概述 #

基于Bootstrap搭建的网站启用AdSense自动广告后，仅窄长型的摩天楼广告在移动端出现异常：广告溢出父Div元素，宽度以屏幕分辨率为基准，而非父容器的实际宽度。尝试以下CSS调整未解决问题：

• 用google-auto-placed iframe {max-width:80vw !important}：广告框架尺寸符合预期，但广告内容被裁剪
• 设置overflow:hidden：同样导致广告内容被裁剪
  通过开发者工具确认，父Div的尺寸显示正常，但广告未适配父容器宽度。

可行解决方案 #

方案1：强制广告容器与iframe继承父容器宽度 #

给广告的父容器添加position: relative（确保广告容器的宽度计算基准正确），同时添加以下CSS：

.google-auto-placed {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible;
}
.google-auto-placed iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

此方案让广告容器和内部iframe完全继承父容器的宽度，避免固定vw值导致的内容裁剪问题。

方案2：结合Bootstrap响应式类控制宽度 #

如果广告放置在Bootstrap的栅格列（如col-md-3等）中，直接给广告容器添加Bootstrap内置的w-100类，再配合以下CSS：

.google-auto-placed {
  position: relative;
}
.google-auto-placed iframe {
  width: 100% !important;
  max-width: 100% !important;
}

w-100类会强制元素宽度为父容器的100%，配合iframe的宽度继承，实现广告自适应父容器。

方案3：调整AdSense后台设置（非代码方式） #

登录AdSense后台，进入自动广告配置页面，找到「广告格式」选项，禁用摩天楼广告的自动投放，改为手动在目标位置插入响应式广告单元。手动插入的响应式广告会根据父容器尺寸自动调整宽度，从根源避免溢出问题。

内容的提问来源于stack exchange，提问作者webworm84