如何让iframe高度达到100%？

Question

我希望Google地图的iframe能够占据100%的高度，目前只有大约150像素。以下是代码，请问我该怎么做，请求帮助。

```html

我希望Google地图的iframe能够占据100%的高度，目前只有大约150像素。以下是代码，请问我该怎么做，请求帮助。

```

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

- Prashanth Palaniswamy

Answer 1

只有设置了父级div的高度，才能实现100％的高度。例如，如果父div的高度为500px，则高度为100％的子div的高度将为500px。

由于iframe的父级是（只要它是页面上唯一的元素），因此您必须将的高度设置为100％：

body {
    height:100%;
}

但是 body 元素也有一个父元素—html。 因此，您还需要设置 html 的高度：

html, body {
    height:100%;
}

然后是你的 iframe：

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

应该能够拉伸到窗口的高度。

- Purag

Answer 2

尝试添加以下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;

如果没有任何反应，请查看此线程

- Leysam Rosario

Answer 3

将你的代码中的"150px"替换为"100%"

- CsharpNoob