iframe height 100% of container in iphone. Is it imposible?
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-pers开发者_运维问答pective: 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&source=s_q&hl=en&geocode=&q=Calle+de+Blanquerna,+Palma,+Espa%C3%B1a&aq=0&sll=39.470059,2.72006&sspn=0.010121,0.022724&vpsrc=6&ie=UTF8&hq=&hnear=Carrer+de+Blanquerna,+Palma,+Illes+Balears,+Spain&ll=39.580489,2.649422&spn=0.023153,0.036478&z=14&iwloc=A&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>
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.
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.
加载中,请稍侯......
精彩评论