如何让iframe的身高100%..?

Pra*_*amy 4 html javascript css

我想谷歌地图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&amp; 
    source=s_q&amp;
    hl=en&amp;
    geocode=&amp;
    q=Prabhakar.C,+ICON+Design+Studio,+sathy+road,+Ganapathy,+87-A,+First+floor,+muniappakoil+thottam,,+Coimbatore,+Tamil+Nadu&amp;aq=1&amp;sll=21.125498,81.914063&amp;sspn=55.331887,107.138672&amp;
    ie=UTF8&amp;
    hq=Prabhakar.C,+ICON+Design+Studio,+sathy+road,+Ganapathy,+87-A,+First+floor,+muniappakoil+thottam,,&amp;hnear=Coimbatore,+Tamil+Nadu&amp;t=m&amp;
    ll=11.041457,76.983948&amp;
    spn=0.080872,0.109863&amp;
    z=13&amp;iwloc=A&amp;
    output=embed">
</iframe>
Run Code Online (Sandbox Code Playgroud)

Pur*_*rag 10

只有设置了父div的高度,才能达到100%的高度.例如,如果父div具有500px的高度,则高度为100%的子div将具有500px的高度.

由于iframe的父级是body(只要它是页面上唯一的元素),因此您必须将高度设置body为100%:

body {
    height:100%;
}
Run Code Online (Sandbox Code Playgroud)

但身体也有父元素html.所以你必须设置html高度:

html, body {
    height:100%;
}
Run Code Online (Sandbox Code Playgroud)

然后你的iframe:

<iframe height="100%" src="..."></iframe>
Run Code Online (Sandbox Code Playgroud)

应伸展到窗户的高度.


Ley*_*rio 5

尝试添加此CSS.

html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { position:fixed; display:block; width:100%; border:none; }
Run Code Online (Sandbox Code Playgroud)

如果没有任何反应,您可以尝试使用javascript:

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

iframe.height = frame_height;
Run Code Online (Sandbox Code Playgroud)

如果没有任何反应,请检查此线程