How to make iframe 100% high ..?

Question

I would like the google iframe map to occupy 100% of the height, at the moment it is only about 150 pixels. The coding is 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> 

Answer 1

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

Since the iframe parent has a body value (as long as it is the only element on the page), you must set the body height to 100%:

 body { height:100%; } 

But the body also has a parent element - html . Therefore, you should also set the html height:

 html, body { height:100%; } 

Then your iframe:

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

Must stretch to the height of the window.

Answer 2

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.

Answer 3

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