Elementor/HTML 制作地图全屏

Question

我想将 Google 地图添加到我的 Elementor 项目中，我是通过使用 Google 提供的 html 代码来实现的。我想要全屏显示地图。问题是，地图没有全高显示。

我制作了一个“适合屏幕”的部分，在本部分中我有一个带有以下代码的 html 元素：

<iframe src="https://www.google.com/maps/d/u/0/embed?hereIsMyKey" width="640" min-height: 100vh></iframe>

Answer 1

可以使用 CSS 设置

height

的确切

iframe

。

Elementor Pro

在元素的 Advanced 选项卡上的 Custom CSS 字段中：

selector iframe {
  width: 100%;
  height: 100vh;
}

Elementor 免费

代码可以直接放在HTML元素中：

<iframe src="https://www.google.com/maps/d/u/0/embed?hereIsMyKey" style="width: 100%; height: 100vh;"></iframe>