Rails iframe标记不能以100％填满整个页面

Question

我将谷歌地图嵌入到我的网站中，我希望地图是全屏的。我有以下iframe代码，但您可以在屏幕截图中看到它不会填满整个屏幕。我使用Ruby on Rails，所以我打赌它是导致它的某种类型的rails默认CSS？

<iframe
  height="100%"
  width="100%"
  frameborder="0" style="border:0"
  src="<%= full_loc %>" allowfullscreen>
</iframe>

整个视图代码看起来像这样（此时它非常原始大声笑）：

<% full_loc = "https://www.google.com/maps/embed/v1/place?key=AIzaSyAC6wrz55kNEjlpa3g4ssAw9T4NdSa2mbM
  &q=" + @homes.location %>


<iframe
  height="100%"
  width="100%"
  frameborder="0" style="border:0"
  src="<%= full_loc %>" allowfullscreen>
</iframe>

<%= form_tag(homes_path, :method => "get", id: "search-form") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search Posts" %>
<%= submit_tag "Search" %>
<% end %>

Answer 1

问题很可能是iframe的父母没有设定身高。

请尝试为height: 100%;的每位家长添加iframe。

html, body { height: 100%; }

Answer 2

我认为地图周围的空间是默认的填充和边距。

添加：

 *{
     padding: 0;
     margin: 0;
  }

这将设置每个DOM元素的默认值。建议不要使用*选择器。如果您知道哪些元素需要padding: 0;而margin: 0;仅将CSS规则应用于那些元素。