本文详解如何通过 css 或内联样式将 google maps 嵌入 iframe 在 elementor 页面中真正铺满整个视口高度（100vh），解决默认 iframe 高度不足、无法全屏显示的问题。
本文详解如何通过 css 或内联样式将 google maps 嵌入 iframe 在 elementor 页面中真正铺满整个视口高度（100vh），解决默认 iframe 高度不足、无法全屏显示的问题。
要在 Elementor 页面中实现 Google Maps 的真正全屏显示（即高度占满整个浏览器可视区域），关键在于正确设置 <iframe></iframe> 的尺寸行为——HTML 属性如 width 和 height 仅支持像素或百分比数值，不支持 vh 单位；而 min-height 在 iframe 上无效。因此，必须借助 CSS 控制其宽高。
✅ 正确做法：使用 100vh + 自适应宽度
方案一：Elementor Pro 用户（推荐）
利用 Elementor Pro 提供的「自定义 CSS」功能，精准作用于当前元素，保持结构清晰且易于维护：
- 编辑含地图的 HTML 小工具 → 切换至 Advanced（高级） 标签页 → 找到 Custom CSS 字段；
- 输入以下代码：
selector iframe {
width: 100%;
height: 100vh;
border: none; /* 可选：去除默认边框 */
}
?
selector是 Elementor 自动识别的占位符，会自动替换为该元素的唯一 CSS 类名，确保样式仅作用于此 iframe，避免全局污染。
方案二：Elementor 免费版用户（兼容性强）
直接在 HTML 小工具中使用内联样式，无需额外插件或设置：
<iframe src="https://www.google.com/maps/d/u/0/embed?hereIsMyKey" style="width: 100%; height: 100vh; border: none;" frameborder="0" allowfullscreen> </iframe>
⚠️ 注意事项：
- 删除原始代码中无效的
min-height: 100vh（HTML 属性不支持该写法）； - 显式添加
frameborder="0"和allowfullscreen以提升兼容性与交互体验； - 确保父级 Section 已设为 Fit to Screen（在 Section 设置 → Layout → Height → Fit to Screen），否则
100vh可能因外层容器高度受限而失效； - 若地图仍显示不全，请检查是否有其他 CSS 规则（如
max-height或overflow: hidden）意外截断了容器。
? 总结
全屏地图的核心是：用 CSS height: 100vh 替代 HTML 属性，并确保父容器无高度限制。Elementor Pro 用户优先使用 Custom CSS 实现模块化控制；免费用户可安全采用内联样式方案。二者均能可靠实现响应式全视口地图展示，适配桌面与主流移动设备。
