Internet Explorer 7 iframe, machen Höhe 100%

In einer Seite, ich habe einen einzigen iframe, in der ich es laden verschiedene Dinge (einige js, Java-applet). Ich würde gerne seine Abmessungen, so dass es passt immer den browser (100%,100%) und ist Scrollbar. Leider, die 100% funktioniert nur für die Breite, für die Höhe meiner Inhalte sind vertikal gequetscht, wenn ich nicht setzen Sie einen Wert in Pixel...
Ich eingefroren haben, den browser-scrollbars, wie das Verhalten der Menschen im IE7 ist schrecklich.

Wie würde ich dieses Problem beheben ? Vielleicht ein Javascript-workaround die einzige Lösung ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
            <style>
                body { 
                    overflow:hidden;
                    height:100%;
                    width:100%;
                    padding:0;
                    margin:0;
                }
                html {
                    height:100%;
                    width:100%;
                    padding:0;
                    margin:0;
                }
            </style>
</head>
<body onload="onLoad()" onunload="onUnload()">
    <iframe  name="contentFrame" width="100%" height="100%" id="contentFrame" src="..."></iframe>
</body>
</html>
InformationsquelleAutor BuZz | 2011-12-06
  1. 4

    Einfachste Lösung:

    1. Html5 doctype, wenn möglich:

    2. 100% auf alle übergeordneten Container:

      *, html, body {
      height: 100%;
      width:100%;
      margin:0;
      padding:0;
      }

    Versuche ich zu vermeiden Javascript-fix für diese Art von Dingen, wie Sie sind einfach-rendering-und layout-Probleme.

    • min-height scheint nicht zu funktionieren für iframes
    InformationsquelleAutor Still Questioning
  2. 0

    Das problem ist, dass der container, der iframe hat eine Höhe, und der iframe selbst, bezeichnet durch den Namen ist inline(frame).

    Bedeutet dies, dass der iframe nicht "generieren" Höhe auf seine eigene, so müssen Sie die Höhe der <body> und <html> - tags zu 100% (auch Ihre margin und padding auf 0)

    Oder mit js innerhalb des iframe:

    function resizeIframe(iframeID) {
    if(self==parent) return false; /* Checks that page is in iframe. */
    else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/

    var FramePageHeight = framePage.scrollHeight + 10; /* framePage
    is the ID of the framed page's BODY tag. The added 10 pixels prevent an
    unnecessary scrollbar. */

    parent.document.getElementById(iframeID).style.height=FramePageHeight;
    /* "iframeID" is the ID of the inline frame in the parent page. */
}
    • Danke ! Ich habe versucht, und aktualisiert die Frage, das problem besteht weiterhin 🙁
    • im momment kann ich nicht testen, da ich keine ie7, wo ich bin, aber versuchen, das hinzufügen dieser auf die iframe: style="width:100%; height:100%; display:block;"
    • Das war eine Idee, hatte aber zuvor versucht, nicht den trick tun 😉
    • Aktualisiert mit js versuchen 😉
    InformationsquelleAutor Mihalis Bagos
  3. 0

    Fand ich einige Javascript, dass funktioniert für den IE. Der einzige Nachteil ist, dass man das iframe drückte für eine Sekunde, bevor es wird sortiert, um den Bildschirm wieder. Genannt werden onload und onresize. Ich denke, ich könnte hinzufügen, einige Jquery für diese beiden Veranstaltungen.

                    function resizeIframe() {
                    var height = document.documentElement.clientHeight;
                    height -= document.getElementById('contentFrame').offsetTop;

                    //not sure how to get this dynamically
                    height -= 0; /* whatever you set your body bottom margin/padding to be */

                    document.getElementById('contentFrame').style.height = height +"px";
                };

                function composite_master_onLoad(){
                    composite_master_callAll('_onLoad');
                    window.moveTo(0, 0);
                    window.resizeTo(screen.availWidth, screen.availHeight);
                    resizeIframe();
                };
    InformationsquelleAutor BuZz
Schreibe einen Kommentar