Bonjour à tous, 
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... 
Merci d'avance 
Message édité par Alekusu2 le 05-06-2009 à 19:38:02
J'essaierai demain sous PC avec FF2 et IE6/7/8