CSS, чтобы iframe взял остальную часть высоты страницы?

Question

Если у меня есть что-то вроде этого:

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

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

Мысли

Answer 1

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

Вы можете достичь этого, используя JavaScript:

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

текст ссылки