Faire en sorte que l’Iframe s’adapte à 100% de la hauteur restante du conteneur

Je souhaite concevoir une page Web avec une bannière et un iframe. J’espère que l’iframe peut remplir toute la hauteur de page restante et être redimensionné automatiquement au fur et à mesure du redimensionnement du navigateur. Est-il possible de le faire sans écrire de code Javascript, uniquement avec CSS?

J’ai essayé la height:100% réglage height:100% sur l’iframe, le résultat est assez proche mais l’iframe a essayé de remplir toute la hauteur de la page, y compris la hauteur 30px de l’élément div de la bannière, donc j’ai obtenu une barre de défilement verticale inutile. Ce n’est pas parfait

Notes de mise à jour : Excusez-moi de ne pas avoir bien décrit la question, j’ai essayé la marge CSS, atsortingbut de remplissage sur DIV pour occuper avec succès toute la hauteur de réédition d’une page Web, mais l’astuce ne fonctionnait pas.

   
Banner

Toute idée est appréciée.

L’astuce consiste à comprendre de quoi est fait le 100%. La lecture des spécifications CSS peut vous aider.

Pour résumer une longue histoire – il y a un “bloc contenant” – qui n’est pas nécessairement l’élément parent. En termes simples, c’est le premier élément de la hiérarchie qui a une position: relative ou position: absolue. Ou l’élément du corps lui-même s’il n’y a rien d’autre. Ainsi, lorsque vous dites “width: 100%”, il vérifie la largeur du “conteneur contenant” et définit la largeur de votre élément à la même taille. S’il y avait autre chose là-bas, alors vous pourriez obtenir un contenu d’un “bloc contenant” plus grand que lui-même (donc “débordant”).

La hauteur fonctionne de la même manière. À une exception près. Vous ne pouvez pas obtenir de hauteur à 100% de la fenêtre du navigateur. L’élément de très haut niveau, contre lequel 100% peut être calculé, est l’élément body (ou html? Not sure), qui s’étire juste assez pour contenir son contenu. Spécifier la hauteur: 100% sur celui-ci n’aura aucun effet, car il n’y a pas d’élément parent par rapport auquel mesurer 100%. La fenêtre elle-même ne compte pas. 😉

Pour que quelque chose s’étire exactement à 100% de la fenêtre, vous avez deux choix:

  1. Utilisez JavaScript
  2. N’utilisez pas DOCTYPE. Ce n’est pas une bonne pratique, mais cela place les navigateurs en “mode quirks”, dans lequel vous pouvez faire hauteur = “100%” sur les éléments et cela les étendra à la taille de la fenêtre. Notez que le rest de votre page devra probablement être modifié pour prendre en compte les modifications apscopes à DOCTYPE.

Mise à jour: Je ne suis pas sûr si je ne me suis pas trompé déjà, mais cela est certainement dépassé. Aujourd’hui, vous pouvez le faire dans votre feuille de style: html, body { height: 100% } et cela s’étendra à l’ensemble de votre fenêtre. Même avec un DOCTYPE. min-height: 100% pourrait aussi être utile, selon votre situation.

Et je ne conseillerais pas non plus à quiconque de faire un document en mode quirks, car cela cause bien plus de maux de tête que de les résoudre. Chaque navigateur a un mode quirks différent, donc rendre votre page plus cohérente sur tous les navigateurs devient plus difficile. Utilisez un DOCTYPE. Toujours. De préférence le HTML5 – . Il est facile à retenir et fonctionne comme un charme dans tous les navigateurs, même ceux de 10 ans.

La seule exception est lorsque vous devez prendre en charge quelque chose comme IE5 ou quelque chose. Si vous êtes là, alors vous êtes tout seul. Ces anciens navigateurs ne ressemblent en rien aux navigateurs d’aujourd’hui, et peu de conseils vous seront fournis. En revanche, si vous êtes là, il vous suffit probablement de prendre en charge UN type de navigateur, qui élimine les problèmes de compatibilité.

Bonne chance!

Mise à jour 2: Hey, ça fait longtemps! 6 ans plus tard, de nouvelles options sont sur la scène. J’ai juste eu une discussion dans les commentaires ci-dessous, voici d’autres astuces qui fonctionnent dans les navigateurs d’aujourd’hui.

Option 1 – positionnement absolu. Nice et propre pour quand vous connaissez la hauteur précise de la première partie.

 body, html {width: 100%; height: 100%; margin: 0; padding: 0} .first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;} .second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red } .second-row iframe {display: block; width: 100%; height: 100%; border: none;} 
 

Some text

And some more text

Nous utilisons un JavaScript pour résoudre ce problème; voici la source.


 var buffer = 20; //scroll bar buffer var iframe = document.getElementById('ifm'); function pageY(elem) { return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop; } function resizeIframe() { var height = document.documentElement.clientHeight; height -= pageY(document.getElementById('ifm'))+ buffer ; height = (height < 0) ? 0 : height; document.getElementById('ifm').style.height = height + 'px'; } // .onload doesn't work with IE8 and older. if (iframe.attachEvent) { iframe.attachEvent("onload", resizeIframe); } else { iframe.onload=resizeIframe; } window.onresize = resizeIframe; 

Remarque: ifm est l'IDrame ID

pageY() été créé par John Resig (l'auteur de jQuery)

Une autre façon de faire serait d’utiliser la position: fixed; sur le nœud parent.
Si je ne me trompe pas, position: fixed; lie l’élément à la fenêtre d’affichage, donc, une fois que vous indiquez cette width: 100%; noeud width: 100%; et height: 100%; propriétés, il couvrira tout l’écran. À partir de là, vous pouvez y placer la et la répartir sur l’espace restant (en largeur et en hauteur) avec une width: 100%; height: 100%; simple width: 100%; height: 100%; width: 100%; height: 100%; Instruction CSS

Exemple de code


  body { margin: 0px; padding: 0px; } /* iframe's parent node */ div#root { position: fixed; width: 100%; height: 100%; } /* iframe itself */ div#root > iframe { display: block; width: 100%; height: 100%; border: none; } 
    iframe Test    

Vous pouvez le faire avec DOCTYPE , mais vous devez utiliser la table . Regarde ça:

       

Header

Voici quelques approches modernes:


  • Approche 1 – Combinaison d’ unités relatives à la fenêtre d’ affichage / calc() .

    L’expression calc(100vh - 30px) représente la hauteur restante. Où 100vh est la hauteur du navigateur et l’utilisation de calc() déplace la hauteur de l’autre élément.

    Exemple ici

     body { margin: 0; } .banner { background: #f00; height: 30px; } iframe { display: block; background: #000; border: none; height: calc(100vh - 30px); width: 100%; } 
       

On a peut-être déjà répondu à cela (quelques réponses ci-dessus sont des manières “correctes” de le faire), mais je pensais simplement append ma solution.

Notre iFrame est chargé dans un div, il me fallait donc autre chose que window.height. Et voir que notre projet repose déjà beaucoup sur jQuery, je trouve que c’est la solution la plus élégante:

 $("iframe").height($("#middle").height()); 

Où bien sûr “#middle” est l’id de la div. La seule chose supplémentaire à faire est de rappeler cette modification de taille chaque fois que l’utilisateur redimensionne la fenêtre.

 $(window).resize(function() { $("iframe").height($("#middle").height()); }); 

Le code MichAdel fonctionne pour moi mais j’ai apporté quelques modifications mineures pour que cela fonctionne correctement.

 function pageY(elem) { return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop; } var buffer = 10; //scroll bar buffer function resizeIframe() { var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight; height -= pageY(document.getElementById('ifm'))+ buffer ; height = (height < 0) ? 0 : height; document.getElementById('ifm').style.height = height + 'px'; } window.onresize = resizeIframe; window.onload = resizeIframe; 

Voici ce que j’ai fait. J’ai eu le même problème et j’ai fini par chercher sur le Web des ressources pendant des heures.

  

J’ai ajouté ceci à la section principale.

Veuillez noter que mon iframe est situé dans la cellule du milieu d’un tableau comportant 3 lignes et 1 colonne.

essayez ce qui suit:

  

ça a fonctionné pour moi

Vous pouvez le faire avec html / css comme ceci:

  
Banner

C’est vrai, vous montrez un iframe avec une hauteur de 100% par rapport à son conteneur: le corps.

Essaye ça:

  
Banner

Bien sûr, changez la hauteur de la deuxième div à la hauteur souhaitée.

Nouveau en HTML5: Utilisez calc (on height)

   
Banner

J’ai utilisé display: table pour résoudre un problème similaire. Cela fonctionne presque pour cela, laissant une petite barre de défilement verticale. Si vous essayez de remplir cette colonne flexible avec autre chose qu’un iframe, cela fonctionne bien (pas

Prenez le code HTML suivant

  

Modifiez le div externe pour utiliser display: table et assurez-vous qu’il a une largeur et une hauteur définies.

 .outer { display: table; height: 100%; width: 100%; } 

Faites de la bannière une rangée de table et définissez sa hauteur selon vos préférences:

 .banner { display: table-row; height: 30px; background: #eee; } 

Ajoutez un div supplémentaire autour de votre iframe (ou du contenu de votre choix) et faites-en une ligne de table dont la hauteur est définie sur 100% (définir sa hauteur est essentielle si vous souhaitez incorporer un iframe pour remplir la hauteur)

 .iframe-container { display: table-row; height: 100%; } 

Ci-dessous un jsfiddle le montrant au travail (sans iframe car cela ne semble pas fonctionner dans le violon)

https://jsfiddle.net/yufceynk/1/

Je pense que vous avez un problème conceptuel ici. Pour dire “j’ai essayé la hauteur de set: 100% sur iframe, le résultat est assez proche mais l’iframe a essayé de remplir toute la page” , eh bien, quand “100%” n’a pas été égal à “ensemble”?

Vous avez demandé à l’iframe de remplir toute la hauteur de son conteneur (qui est le corps) mais malheureusement, il a un niveau de bloc dans le

au-dessus duquel vous avez demandé une taille de 30px. Donc, le total du conteneur parent est maintenant demandé de redimensionner à 100% + 30px> 100%! D’où les barres de défilement.

Ce que je pense que vous voulez dire, c’est que vous aimeriez que l’iframe consum ce qui rest comme les frameworks et les cellules de la table, ie height = “*”. IIRC cela n’existe pas.

Malheureusement, pour autant que je sache, il n’y a aucun moyen de combiner / calculer / soustraire efficacement des unités absolues et relatives, donc je pense que vous êtes réduit à deux options:

  1. Positionnez absolument votre div qui le sortira du conteneur pour que l’iframe consum à lui seul la hauteur de ses conteneurs. Cela vous laisse avec toutes sortes d’autres problèmes, mais peut-être que pour ce que vous faites l’opacité ou l’alignement serait correct.

  2. Sinon, vous devez spécifier un% height pour le div et réduire la hauteur de l’iframe de cette manière. Si la hauteur absolue est vraiment importante, vous devrez l’appliquer à un élément enfant du div à la place.

Ayant essayé la route css pendant un moment, j’ai fini par écrire quelque chose d’assez simple dans jQuery qui a fait le travail pour moi:

 function iframeHeight() { var newHeight = $j(window).height(); var buffer = 180; // space required for any other elements on the page var newIframeHeight = newHeight - buffer; $j('iframe').css('height',newIframeHeight); //this will aply to all iframes on the page, so you may want to make your jquery selector more specific. } // When DOM ready $(function() { window.onresize = iframeHeight; } 

Testé sous IE8, Chrome, Firefox 3.6

Il fonctionnera avec le code mentionné ci-dessous

  

Réponse similaire de @MichAdel, mais j’utilise JQuery et plus élégant.

  

iframe_id est l’ID de la balise iframe

Vous pouvez le faire en mesurant la taille du corps lors du chargement / redimensionnement des événements et en définissant la hauteur sur (hauteur totale – hauteur de la bannière).

Notez qu’actuellement, dans IE8 Beta2, vous ne pouvez pas effectuer cette opération car cet événement est actuellement cassé dans IE8 Beta2.

ou vous pouvez aller à la vieille école et utiliser un frameset peut-être:

     

Bien que je convienne que JS semble être une meilleure option, j’ai une solution quelque peu CSS. L’inconvénient est que si vous devez append du contenu à votre document HTML iframe fréquemment, vous devrez adapter un pourcentage de temps de réponse.

Solution:

Essayez de ne spécifier aucune hauteur pour vos documents HTML,

 html, body, section, main-div {} 

alors seulement coder ceci:

 #main-div {height:100%;} #iframe {height:300%;} 

note: le div devrait être votre section principale.

Cela devrait fonctionner relativement. l’iframe calcule exactement 300% de la hauteur de la fenêtre visible. Si votre contenu HTML à partir du deuxième document (dans l’iframe) est plus petit que 3 fois la hauteur de votre navigateur, cela fonctionne. Si vous n’avez pas besoin d’append fréquemment du contenu à ce document, il s’agit d’une solution permanente et vous pouvez simplement trouver votre propre% nécessaire en fonction de la hauteur de votre contenu.

Cela fonctionne parce qu’il empêche le 2ème document HTML (celui incorporé) d’hériter sa hauteur du document HTML parent. Cela l’empêche car nous n’avons pas spécifié de hauteur pour les deux. Lorsque nous donnons un% à l’enfant, il recherche son parent, sinon il prend sa taille de contenu. Et seulement si les autres conteneurs ne sont pas dotés de hauteurs, d’après ce que j’ai essayé.

L’atsortingbut ” seamless ” est une nouvelle norme visant à résoudre ce problème:

http://www.w3schools.com/tags/att_iframe_seamless.asp

Lors de l’atsortingbution de cet atsortingbut, il supprimera les bordures et les barres de défilement et dimensionnera l’iframe à sa taille de contenu. bien qu’il ne soit supporté que dans Chrome et dans la dernière version de Safari

plus à ce sujet ici: HTML5 iFrame Seamless Atsortingbute

Une solution simple jQuery

Utilisez ceci dans un script dans la page iframed

 $(function(){ if(window != top){ var autoIframeHeight = function(){ var url = location.href; $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4); } $(window).on('resize',autoIframeHeight); autoIframeHeight(); } } 

vous ne pouvez pas définir la hauteur d’iframe en% car la hauteur de votre corps parent n’est pas de 100%, alors atsortingbuez la hauteur parent à 100%, puis appliquez la hauteur iframe à 100%

 For eg.         

Si vous avez access au contenu de l’iframe qui sera chargé, vous pouvez demander à son parent de redimensionner chaque fois qu’il redimensionne.

  $(window).resize(function() { $(parent.document) .find("iframe") .css("height", $("body").css("height")); }).sortinggger("resize"); 

Si vous avez plusieurs iframe sur la page, vous devrez peut-être utiliser des identifiants ou d’autres méthodes intelligentes pour améliorer .find (“iframe”) afin de sélectionner le bon.

Je pense que la meilleure façon de réaliser ce scénario est d’utiliser la position CSS. définir la position par rapport à votre div et position parent: absolue à votre iframe.

 .container{ width:100%; position:relative; height:500px; } iframe{ position:absolute; width:100%; height:100%; } 
 

Pourquoi ne pas le faire (avec un ajustement mineur pour le rembourrage du corps / les marges)