iframeの高さを100%にする方法は?

私はGoogleマップのiframeを高さの100%を占めるようにしたいと思います。現在は約150pxです。コーディングは以下の通りですが、どうすればいいですか、私を助けてください。

<iframe width="67%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q& 
    source=s_q&
    hl=en&
    geocode=&
    q=Prabhakar.C,+ICON+Design+Studio,+sathy+road,+Ganapathy,+87-A,+First+floor,+muniappakoil+thottam,,+Coimbatore,+Tamil+Nadu&aq=1&sll=21.125498,81.914063&sspn=55.331887,107.138672&
    ie=UTF8&
    hq=Prabhakar.C,+ICON+Design+Studio,+sathy+road,+Ganapathy,+87-A,+First+floor,+muniappakoil+thottam,,&hnear=Coimbatore,+Tamil+Nadu&t=m&
    ll=11.041457,76.983948&
    spn=0.080872,0.109863&
    z=13&iwloc=A&
    output=embed">
</iframe>
4

3 答え

100%の高さは、親divの高さが設定されている場合にのみ達成できます。たとえば親のdivの高さが500pxの場合、高さ100%の子divの高さは500pxになります。

iframeの親は body (ページ上の唯一の要素である)なので、 body の高さを100%に設定する必要があります:

body {
    height:100%;
}

But body has a parent element too—html. So you have to set html's height as well:

html, body {
    height:100%;
}

次にiframe:

<iframe height="100%" src="..."></iframe>

窓の高さに伸びるべきです。

10
追加された

このCSSを追加してみてください。

html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { position:fixed; display:block; width:100%; border:none; }

何も起こらない場合は、javascriptを使用して試すことができます:

iframe = document.getElementById("frameId");
frame_height = 500;

iframe.height = frame_height;

何も起こらない場合は、スレッドを確認してください。

5
追加された

コードから "150px"を削除し、 "100%"に置き換えてください

3
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript