iframe height 100% of container in iphone. Is it imposible?

Question

I am trying a google.maps iframe to use all height and all width;

tried with CSS

iframe{min-width:100%;height: 100%;min-height: 2000px;overflow:auto;}

even with jquery

$(document).ready(function() {
   alert($('#contenido').height()+'altura contendio');
   alert($('#contenedor').height()+'altura contenedor');
   alert($('iframe').height()+'altura iframe');
   $('iframe').css('height',$('#contenido').height()+'px');
   alert($('iframe').height()+'altura iframe');
});

or

$(document).ready(function() {
   alert($('#contenido').height()+'altura contendio');
   alert($('#contenedor').height()+'altura contenedor');
   alert($('iframe').height()+'altura iframe');
   $('iframe').css('height','200%');
   alert($('iframe').height()+'altura iframe');
});

the alerts are like 4254 or so...

just in case #contenido CSS is

#contenido
{
    width: 100%;
    height:100%;
    display:block;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;

}

Any idea? this is driving me crazy... :(

almost forgot, HTML (i will paste it all, just in case)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>lich-t // KONTAKT</title>
                <meta name="viewport" content="width=device-width" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" media="all and (max-device-width: 320px)" href="iphone3.css" />
        <link rel="stylesheet" media="all and (max-device-width: 640px)" href="iphone4.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
                <script type="text/javascript" src="js/dropDown.js"></script>
    </head>
    <body class="kontakt_map">


            <div id="head" class="section"><a href="index.html"><img src="img/logo_small.png" alt="lich-t" id="logo_small" /></a><h3><a href="locations.html"></a>KONTAKT</a></h3></div>
            <div id="contenedor"><div id="contenido">
                <iframe frameborder="0" scrolling="no" height="750" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Calle+de+Blanquerna,+Palma,+Espa%C3%B1a&amp;aq=0&amp;sll=39.470059,2.72006&amp;sspn=0.010121,0.022724&amp;vpsrc=6&amp;ie=UTF8&amp;hq=&amp;hnear=Carrer+de+Blanquerna,+Palma,+Illes+Balears,+Spain&amp;ll=39.580489,2.649422&amp;spn=0.023153,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
                <div id="panel" class="floating_right">
                    <ul class="right floating">
                        <li><a href="#"><img src="img/location_azul.png" alt="Westlich-t" /></a></li>
                        <li><a href="#"><img src="img/location_rosa.png" alt="Sudlich-t" /></a></a></li>
                        <li><a href="#"><img src="img/location_naranja.png" alt="Sudlich-t" /></a></a></li>
                    </ul>
                </div>

            </div>
    </div>  



    </body>
</html>

Can you post your HTML as well? Could this have to do with `` or `` size? — Brad, Aug 31 '11 at 19:05
edited, if you want to see live: http://piscolabis.info/licht/kontakt_map.html — Toni Michel Caubet, Aug 31 '11 at 19:07
has been discontinued from html5 and of course will not be available in newer webkit versions, I highly recommend you to use something else like ajax. — cvsguimaraes, Aug 31 '11 at 19:09
Welcome to the future http://code.google.com/intl/en/apis/maps/documentation/javascript/ — cvsguimaraes, Aug 31 '11 at 19:13
@cvsguimaraes, I believe you are incorrect. `` is part of HTML5. Can you provide a reference that says otherwise? — Brad, Aug 31 '11 at 19:23
@cvsguimaraes, unfortunately i don't think i have time enough to run the doc, tutorial, examples and video.. i tried to copy and paste the example tutorial but i don't see any map :( http://piscolabis.info/licht/kontakt_map.html do you have any copy paste already used to me? :$ — Toni Michel Caubet, Aug 31 '11 at 19:29
@Brad It's waiting for his own euthanasia. Why not opt for something more durable and flexible? It's too hard? http://stackoverflow.com/questions/755795/are-iframes-html-obsolete — cvsguimaraes, Aug 31 '11 at 19:34
@cvsguimaraes, THANKS A MILLION!!!!!!!!! all i was missing was the init in the body- If you want to add it as an answer i will mark it as correct (as you where the first in introduce me the FUTURE :D) — Toni Michel Caubet, Aug 31 '11 at 19:50
@cvsguimaraes, iframes do have a purpose, as pointed out by the very question you linked to. Don't lie and say that they are removed from HTML5. Yes, absolutely, they should not be used just out of convenience, but say that then. There is no need to spread inaccurate information. — Brad, Aug 31 '11 at 21:38

score 2 · Answer 1 · answered Aug 31 '11 at 19:07

2

Please see this article, where author writes:

The html and body tags must be set to height:100%; this allows us to set a percentage height on our container div later. I have also removed the margins and padding on the body tag so there are no spaces around the parameter of the page.

As mentioned above, you must set height of the html and body tags specifically (I know, it is far from obvious):

html, body {
    height: 100%;
}

Please tell me if it worked for you.

answered Aug 31 '11 at 19:07

Tadeck

132,510
28
152
198

body and html are already like that (you can check the full CSS -if you want- in my other comment link. – Toni Michel Caubet Aug 31 '11 at 19:09
@Tony Michel Caubet: Then please refer to [this article](http://econym.org.uk/gmap/basic19.htm) and [this example](http://econym.org.uk/gmap/example_fullscreen1.htm). Have you tried copy&paste that code? – Tadeck Aug 31 '11 at 19:16

score -3 · Accepted Answer · answered Aug 31 '11 at 19:57

-3

Iframes are obsolete for page layout. Never use them instead of good CSS layout, even table-based layout is better. Also, it will be discontinued in future, I highly recommend you to use something else like ajax in Google maps API.

answered Aug 31 '11 at 19:57

cvsguimaraes

12,910
9
49
73

5

He's not using the iframe for layout - he's using it to bring in a nested browsing context. To say that table-based layout is better is ridiculous - an iframe is not an alternative to CSS. Iframes are part of the HTML5 spec, and there's no reason to belive they will be discontinued. http://dev.w3.org/html5/markup/iframe.html – Chris B Oct 11 '11 at 16:44

iframe height 100% of container in iphone. Is it imposible?

2 Answers2