Rails iframeタグが100％でページ全体を埋めていない

私は自分のウェブサイトにGoogleマップを埋め込みました。マップをフルスクリーンにしたいです。私は次のiframeコードを持っていますが、画面全体で画面全体が満たされていないことがわかります。私はRuby on Railsを使用しているので、それを引き起こしているレールのデフォルトCSSのようなものだと賭けているのですか？Rails iframeタグが100％でページ全体を埋めていない

<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 %>

出典

2016-07-05 Kendall Weihe

問題がiframeの両親が持っていない可能性が最も高いです高さを設定します。

iframeの各親にheight: 100%;を追加してください。

html, body { height: 100%; }

出典

2016-07-05 18:26:15

親タグはありません。これはRailsのものですが、各ビューファイルは他のデフォルトビューファイルに埋め込まれています。おもう？つまり、それは必要ですか？私は全体のビューコードで投稿を更新しました。 –

ビューはHTMLを生成し、私は 'iframe'のHTML親を参照しています。例えば、 'html'と' body'タグは親です。 'html、body {height：100％;}' –

というCSSルールを追加してみてください。ただし、 'frameborder =" 0 "'を持っていても左上と右辺の周りに境界線が残っています。何か案は？ **編集**他の答えがこの問題を解決しました –

私は、マップの周りの空間は、デフォルトのパディングとマージンのだと思います。

追加：

*{ 
    padding: 0; 
    margin: 0; 
    }

これは、各DOM要素のデフォルト値を設定します。 *セレクタの使用はお勧めしません。 padding: 0;とmargin: 0;が必要な要素が分かっている場合は、それらにのみCSSルールを適用してください。

出典

2016-07-05 18:37:12

Rails iframeタグが100％でページ全体を埋めていない

答えて

関連する問題