I would like the google map iframe to occupy 100% of the height, as of now it is only around 150px. The coding is as shown below, what should I do, please help me.

<iframe width="67%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";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>

I would like the google map iframe to occupy 100% of the height, as of now it is only around 150px. The coding is as shown below, what should I do, please help me.

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

• javascript
• html
• css

3 Answers 3

100% height can only be achieved if the parent div's height is set. If the parent div has, for example, a height of 500px, a child div with a height of 100% would have a height of 500px.

Since the iframe's parent is body (as long as it is the only element on the page) then you have to set the height of body to 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%;
}

Then your iframe:

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

Should stretch to the window's height.

Try adding this css.

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

If nothing happens you can try using javascript:

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

iframe.height = frame_height;

if nothing happens, check this thread

remove the "150px" from you code and replace it with "100%"