Rails iframe 标记未以 100% 填充整个页面答案

【问题标题】：Rails iframe tag not filling entire page at 100%Rails iframe 标记未以 100% 填充整个页面
【发布时间】：2016-07-05 18:19:29
【问题描述】：

我正在将谷歌地图嵌入到我的网站中，并且我希望地图是全屏的。我有以下 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 %>

【问题讨论】：

标签： html css ruby-on-rails ruby iframe

【解决方案1】：

问题很可能是iframe的父母没有设置高度。

请尝试为iframe 的每个父级添加height: 100%;。

html, body { height: 100%; }

【讨论】：

没有父标签。 Rails 就是这样，每个视图文件都嵌入到其他一些默认视图文件中。我认为？我的意思是，必须吗？我已经用整个视图代码更新了帖子。
视图将生成 HTML，我指的是iframe 的 HTML 父级。例如，html 和 body 标签是父标签。尝试添加以下 CSS 规则：html, body {height: 100%;}
做到了，但是即使我有frameborder="0"，左上角和右侧仍然有边框。有任何想法吗？ EDIT 其他答案解决了这个问题
您需要使用frameBorder="0" 与大写B。您可以删除iframe 的样式。但是，如果您要使用它，请使用 style="border: none;"

【解决方案2】：

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

添加：

 *{
     padding: 0;
     margin: 0;
  }

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

【讨论】：