Iframe : Height à 100%

Marsh Posté le 05-06-2009 à 18:40:08

Bonjour à tous, :hello:

Je me penche actuellement sur le fameux "bug" de l'height à 100% de l'iframe. En gros le souci, c'est que si on met une iframe en "height:100%;", l'iframe ne s'adapte pas à la taille de la page et se limite à en gros 100px de hauteur.
Après de longues recherches sur google, je n'ai trouvé que des solutions bancales bien que ce problème semble être un casse-tête pour beaucoup de devs.

Quelqu'un connaîtrait-il une solution solide à ce problème ? (solution cross-browser)
Facebook utilise une iframe pour afficher les liens externes tout en gardant en haut un petit bandeau facebook (exactement ce que je veux faire).

J'ai donc essayé d'adapter ce code là à ma page.

JS :

Code :

var FramedPageController=
{
manuallyAdjustIframe:false,iframeLoadCount:0,iframeLoadHandler:function()
{
this.iframeLoadCount++;
if(this.iframeLoadCount>2)
{
$('conteneur_general').addClass('unknown_page');this.resizeIframe();
}
}
,setManualIframeAdjustment:function()
{
this.manuallyAdjustIframe=true;this.resizeIframe();
Event.listen(window,'resize',bind(this,this.resizeIframe));
}
,resizeIframe:function()
{
var viewport=Vector2.getViewportDimensions();
var header=Vector2.getElementDimensions($('navigateur_barre'));
if(this.manuallyAdjustIframe)
{
viewport.setElementHeight($('conteneur_iframe'));
viewport.sub(header).setElementHeight($('conteneur_iframe'));
}
else
{
viewport.setElementHeight($('conteneur_general'));
bind($('conteneur_general'),'setStyle','height','100%').defer();
}
}
};

HTML :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple.com</title>
<link rel="stylesheet" rev="stylesheet" href="css/navigateur.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/navigateur.js"></script>
</head>
<body>
<div id="conteneur_general">
<div id="navigateur_barre">
Contenu
</div>
<div id="conteneur_iframe">
<iframe id="navigateur_iframe" src="http://www.apple.com/fr/" frameborder="0" scrolling="auto" onload="FramedPageController.iframeLoadHandler();"></iframe>
</div>
</div>
</body>
</html>

CSS :

Code :

*
{
border: 0;
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body
{
width:100%;
height:100%;
overflow:hidden;
}
#conteneur_general
{
height: 100%;
width: 100%;
}
#navigateur_barre
{
height: 50px;
width: 100%;
}
#conteneur_iframe
{
height: 100%;
overflow: hidden;
vertical-align: top;
}
#navigateur_iframe
{
width: 100%;
height: 100%;
}

Edit : Je ne sais pas si je l'ai mal adapté ou quoi, mais ça ne marche pas. En gros l'idée dans ma tête c'est avec JS trouver la hauteur intérieure de la fenêtre (ou de #conteneur_general en pixels), retirer 50px (= hauteur de ma barre en haut) et appliquer cette hauteur là à #navigateur_iframe
après je suis parti du principe que le code de facebook aurait surement été plus réfléchi en prenant en compte tous les cas de figure mais j'arrive pas à le faire marcher
Bref, si quelqu'un à une idée... :sweat:

Merci d'avance :jap:

Message édité par Alekusu2 le 05-06-2009 à 19:38:02

Reply

Marsh Posté le 05-06-2009 à 18:40:08

Reply

Marsh Posté le 05-06-2009 à 22:02:24

Mouais, la propriété "height: 100%" est un peu tordue : pour qu'il y ait un effet, il faut que tous les éléments parents aient une hauteur fixées.

Dans ton exemple, la balise html n'a pas de hauteur définie, donc ça foire.

Edit: j'ai pas testé ça sur beaucoup de navigateur, mais j'ai le présage que ça va merder niveau compatibilité (FF3 et IE7 ont l'air correct, c'est déjà pas si mal).

Message cité 1 fois
Message édité par tpierron le 05-06-2009 à 22:05:59

Reply

Marsh Posté le 05-06-2009 à 22:23:04

tpierron a écrit :

Mouais, la propriété "height: 100%" est un peu tordue : pour qu'il y ait un effet, il faut que tous les éléments parents aient une hauteur fixées.

Dans ton exemple, la balise html n'a pas de hauteur définie, donc ça foire.

Edit: j'ai pas testé ça sur beaucoup de navigateur, mais j'ai le présage que ça va merder niveau compatibilité (FF3 et IE7 ont l'air correct, c'est déjà pas si mal).

En effet sous mac aucun souci avec Safari 3, FF3 et Opera 9 :love: J'essaierai demain sous PC avec FF2 et IE6/7/8
1000 merci ! Tu m'as sauvé :love:

Message édité par Alekusu2 le 05-06-2009 à 22:24:11

Reply

Marsh Posté le 08-06-2009 à 20:49:26

Ne peux-tu pas éviter les iframe ?
En général, c'est plutôt merdique ce truc...

Reply

Marsh Posté le 09-06-2009 à 10:48:04

C'est complètement merdique ce truc c'est clair, je les ai évités pendant 10 ans

Mais pouvoir afficher un bandeau horizontal en haut d'un site A pendant que le visiteur surfe sur le reste de l'écran sur un site B, y a pas 50 solutions. Même facebook est passé par cette solution...

Après si tu as une idée, je suis largement preneur ^^

Reply

Marsh Posté le 10-06-2009 à 11:59:56

Oui c'est vrai, Google l'utilise aussi...

Reply

Marsh Posté le 10-06-2009 à 16:11:20

Je viens de regarder le code de Google pour faire ce truc justement. Et mon dieu

C'est du HTML 4 et encore, y a plein de balises qui sont ouvertes mais jamais fermées, les attributs ne sont même pas mis dans des guillemets, l'horreur Tout est en vrac.

Google devrait montrer un minimum l'exemple en terme de pérennité, d'accessibilité, normes W3C, etc...

Message édité par Alekusu2 le 10-06-2009 à 16:11:42

Reply

Iframe : Height à 100%

Sujets relatifs:

Leave a Replay