如何使 iframe 高度 100% ..？

Posted 2023-03-05

【中文标题】如何使 iframe 高度 100% ..？

【英文标题】：How to make iframe's height 100% ..?

【发布时间】：2012-01-05 21:48:59

【问题描述】：

我希望谷歌地图 iframe 占据 100% 的高度，目前只有 150px 左右。编码如下图，我该怎么办，请帮帮我。

<iframe   frameborder="0" scrolling="no" margin margin 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>

【参考方案1】：

尝试添加这个 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;

如果没有任何反应，请查看thread

【参考方案2】：

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

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

body 
    height:100%;

但是 body 也有一个父元素——html。所以你也必须设置html的高度：

html, body 
    height:100%;

然后是你的 iframe：

<iframe  src="..."></iframe>

应该拉伸到窗口的高度。

【参考方案3】：

从您的代码中删除“150px”并将其替换为“100%”