CSS, чтобы сделать iframe остальной высотой страницы?

Если у меня есть что-то вроде этого:CSS, чтобы сделать iframe остальной высотой страницы?

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

Функция Iframe убегает страницу. По разным причинам я не могу указать абсолютную высоту. Каков правильный способ CSS, чтобы элемент использовал оставшуюся высоту своего элемента контейнера? Быстрый поиск Google утверждал, что это невозможно, но, безусловно, есть обходной путь. Внутренний iframe здесь имеет градиент, который из-за неспособности IE отображать четкие фреймы iframe должен просто занимать остальную часть страницы.

Мысли?

источник

2009-11-17 Stefan Kendall

Я бы предложил использовать альтернативные встречные hods для включения внешнего контента на вашу страницу. Насколько я знаю, IFrames не индексируются поисковыми системами, и некоторые пользователи могут даже отключить фреймы alltogether. – o01

Я бы предложил тег '

'. В CSS нет чистого способа сделать это, а решение javascript - это похоже на попытку раздавить ошибку с кувалдой. – Duroth

@Eirik: Я бы хотел, но Linux сломался и, как правило, разбивает firefox при загрузке моей страницы, но только если включены политики SELinux или подобные брандмауэры. Используя iframe для эмуляции вызовов ajax, которые я делал раньше, я не могу сбой. –

ответ

Так много повторов этого вопроса :)

Вы можете достичь этого с помощью JavaScript:

Этот сценарий был взят из Dynamic Drive и отредактированного: (только rememebr указать
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

источник

2009-11-17 15:02:40

Это худшее решение. –

да согласен! Однако я не думаю, что это возможно сделать в CSS и совместим с кросс-браузером:/ –

... да. Вот почему я дал вам согласие, но я отказываюсь от поддержки! Если бы я мог спуститься вниз, не отказываясь, я бы! –

Смежные вопросы