CSS pour faire un iframe prendre le reste de la hauteur de la page?

Si j'ai quelque chose comme ceci:CSS pour faire un iframe prendre le reste de la hauteur de la page?

<p>Element<p> 
<iframe src = "otherPage.html" style = "width:100%;height:100%"> 
</iframe>

Le iframe court la page. Pour diverses raisons, je ne peux pas spécifier une hauteur absolue. Quelle est la manière CSS appropriée pour qu'un élément utilise la hauteur restante de son élément conteneur? Une recherche rapide sur google a prétendu que c'était impossible, mais il y a certainement une solution de contournement. L'iframe interne a ici un dégradé qui, du fait de l'incapacité d'IE à afficher des arrière-plans iframe clairs, doit simplement occuper le reste de la page.

Pensées?

Source

2009-11-17 Stefan Kendall

Je suggère d'utiliser alternative rencontré Hods pour inclure du contenu externe sur votre page. Les IFrames ne sont pas indexés par les moteurs de recherche autant que je sache, et certains utilisateurs peuvent même avoir des cadres complètement désactivés. – o01

Je suggère une balise '

'. Il n'y a pas de moyen propre de faire cela en CSS, et une solution javascript est .. Un peu comme essayer d'écraser un bug avec un marteau. – Duroth

@Eirik: Je le ferais, mais Linux est cassé et a tendance à planter Firefox quand ma page se charge, mais seulement si SELinux ou des pare-feu similaires sont activés. En utilisant un iframe pour émuler les appels ajax que je faisais auparavant, je ne suis pas écrasé. –

Répondre

Tant de répétitions de cette question :)

Vous pouvez y parvenir en utilisant javascript:

Ce script a été prise de Dynamic Drive et modifié: (juste rememebr préciser
var iframeids = ["Whatever frame id's you want to auto-resize seperated by ,"]

<script type="text/javascript" language="javascript"> 

    /*********************************************** 
    * IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com) 
    * Visit DynamicDrive.com for hundreds of original DHTML scripts 
    * This notice must stay intact for legal use 
    ***********************************************/ 

    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height: 
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none: 
    var iframeids = ["contentFrame"] 

    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended): 
    var iframehide = "no" 

    var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1] 
    var FFextraHeight = parseFloat(getFFVersion) >= 0.1 ? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers 

    function resizeCaller() { 
     var dyniframe = new Array() 
     for (i = 0; i < iframeids.length; i++) { 
      if (document.getElementById) 
       resizeIframe(iframeids[i]) 
      //reveal iframe for lower end browsers? (see var above): 
      if ((document.all || document.getElementById) && iframehide == "no") { 
       var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i]) 
       tempobj.style.display = "block" 
      } 
     } 
    } 

    function resizeIframe(frameid) { 
     var currentfr = document.getElementById(frameid) 
     if (currentfr && !window.opera) { 
      currentfr.style.display = "block" 
      if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax 
       currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight; 
      else if (currentfr.contentDocument && currentfr.contentDocument.documentElement.offsetHeight) //ns6 syntax 
       currentfr.height = currentfr.contentDocument.documentElement.offsetHeight + FFextraHeight; 
      else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax 
       currentfr.height = currentfr.Document.body.scrollHeight; 
      else if (currentfr.Document && currentfr.Document.documentElement.scrollHeight) //ie5+ syntax 
       currentfr.height = currentfr.Document.documentElement.scrollHeight; 
      if (currentfr.addEventListener) 
       currentfr.addEventListener("load", readjustIframe, false) 
      else if (currentfr.attachEvent) { 
       currentfr.detachEvent("onload", readjustIframe) // Bug fix line 
       currentfr.attachEvent("onload", readjustIframe) 
      } 
     } 
    } 

    function readjustIframe(loadevt) { 
     var crossevt = (window.event) ? event : loadevt 
     var iframeroot = (crossevt.currentTarget) ? crossevt.currentTarget : crossevt.srcElement 
     if (iframeroot) 
      resizeIframe(iframeroot.id); 
    } 

    function loadintoIframe(iframeid, url) { 
     if (document.getElementById) 
      document.getElementById(iframeid).src = url 
    } 

    if (window.addEventListener) 
     window.addEventListener("load", resizeCaller, false) 
    else if (window.attachEvent) 
     window.attachEvent("onload", resizeCaller) 
    else 
     window.onload = resizeCaller 

</script>

link text

Source

2009-11-17 15:02:40

C'est la pire des solutions. –

ouais d'accord! Cependant, je ne pense pas qu'il soit possible de le faire en CSS et l'avoir cross-navigateur compatible:/ –

... ouais. C'est pourquoi je vous ai donné l'acceptation, mais je refuse d'upvote! Si je pouvais downvote sans down-repping, je le ferais! –

Questions connexes