IFRAME und widersprüchliche absolute Positionen

Ich mag würde einen IFRAME dynamisch haben bemessen, dass die folgenden CSS:IFRAME und widersprüchliche absolute Positionen

#myiframe { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

scheint jedoch kein Browser, dies zu unterstützen.

In guten Browsern konnte ich den IFRAME in einem DIV mit dem zitierten CSS-Stil umhüllen und die Höhe & Breite des IFRAME auf 100% setzen. Aber das funktioniert nicht in IE7. Haben Sie es geschafft, CSS-Ausdrücke zu verwenden?

aktualisieren

MatTheCat mit einem Szenario beantwortet, wenn das IFRAME arbeitet direkt unter dem Körper angeordnet ist und der Körper/HTML-Tags haben height: 100% gesetzt. In meiner ursprünglichen Frage habe ich nicht angegeben, wo der IFRAME war und welches Styling auf seinen Container angewendet wurde. Hoffentlich werden die folgenden Adressen dieser:

<html> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html>

und lassen Sie uns den folgenden Container CSS übernehmen:

#container { 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
}

, wenn Sie jetzt height: 100% auf dem IFRAME legen Sie es nicht richtig Größe werden.

Quelle

2010-10-20 Anonymous

Ich schlage vor, Sie ‚akzeptieren‘ eine der beiden neuesten Antworten auf hier, da sowohl die Frage beantworten. Ich habe ein Kopfgeld vergeben. –

html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
    min-height:100%; 
} 
#myiframe { 
    width:100%; 
    height:100%; 
    border:0; 
}

funktionieren gut für mich sogar mit IE7.

Quelle

2010-10-20 14:53:28 MatTheCat

Danke für die Antwort. Leider war ich in der Frage nicht spezifisch genug. Ich habe es mit mehr Details geändert. –

Ich würde sagen, werfen Sie einen Blick auf diese Stapelüberlauf Frage. Es könnte helfen:

Make Iframe to fit 100% of container's remaining height

Quelle

2010-10-20 16:01:55 InvisibleBacon

Warum Sie Höhe nicht verwenden & Breite? Sie erhalten immer noch eine absolute Position, indem Sie oben/unten & links/rechts einstellen, wie im folgenden Beispiel.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       margin:0; 
       padding:0; 
       border:0px; 
       height:100%; 
       width:100%; 
      } 
      #container { 
       position: absolute; 
       top: 10px; 
       bottom: 10px; 
       left: 10px; 
       right: 10px; 
      } 
      #myiframe { 
       position: absolute; 
       top: 0%; 
       left: 0%; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html>

Dies funktioniert für mich (Getestet auf IE9).

Quelle

2011-09-30 18:33:45 Sathvik

Das funktioniert. Das einzige, was mir fehlte, war die "Position: absolut" auf dem "iframe". Kannst du erklären, warum ich den 'iframe' in einen Container wickeln muss, anstatt das CSS des Containers darauf zu setzen? –

Was meinen Sie, indem Sie das CSS des Containers auf den "iframe" setzen? Wenn Sie davon sprechen, keinen Container zu verwenden, wird das body-Element (übergeordnet) standardmäßig zum Container. – Sathvik

Wir könnten immer noch denselben Effekt erzielen, indem wir die Parameter "top", "left", "height" und "width" auf dem "iframe" variieren. – Sathvik

Verwenden Sie ein div für die Polsterung auf allen Seiten. Setzen Sie den iframe mit 100% des übergeordneten div in das Element.

http://jsfiddle.net/sg3s/j8sbX/

Jetzt gibt es ein paar Dinge, die Sie sich merken müssen. Ein iframe ist ursprünglich ein Inline-Frame, also ist es modernen Browsern egal, ob display: block darauf gesetzt ist. Standardmäßig hat es auch einen Rahmen. Jedes Stying, das wir machen wollen, muss stattdessen auf dem iframe-Container durchgeführt werden, sonst brechen wir den 100% -Container-Bereich.

Und das ist, wie wir ein Element oben sagen würde:

http://jsfiddle.net/sg3s/j8sbX/25/ (edit: mein schlecht, Sie brauchen eigentlich Grenze setzen = 0 auf dem iframe für IE7)

Sollte in IE7 funktionieren + (IE6 nicht absolute Positionierung mag + mit oben/rechts/unten/links es Layout geben)

bearbeiten einige zusätzliche Erklärung

Wir brauchen den iframe Behälter m stylen Ein Iframe auf sich selbst lässt sich nicht mit top/left/bottom/right sortieren. Aber was funktioniert, ist seine Breite und Höhe auf 100% zu setzen. Wir beginnen also damit, den iframe einfach in ein Element zu verpacken, das wir zuverlässig so gestalten können, dass weniger als das Fenster 100% ergibt, also die Größe, die die Elemente standardmäßig verwenden, wenn keiner ihrer Eltern eine statische Höhe/Breite hat.

Wenn wir darüber nachdenken, können wir tatsächlich das Absolute fallen lassen und blockieren. http://jsfiddle.net/sg3s/j8sbX/26/ Möglicherweise möchte IE7 auf das obwohl überprüfen.

Nachdem wir den Iframe zu 100% hoch und breit gemacht haben, können wir keinen Rand, Padding oder Rand darauf setzen, da dieser zu der bereits 100% Höhe & Breite hinzugefügt wird. Dadurch wird es größer als sein Behälter, für divs, die zu einem Überlauf führen: sichtbar, einfach alles über die Ränder zeigend. Aber das wiederum würde die Ränder, Abstände und Abstände, die wir unseren Elementen gegeben haben, durcheinander bringen. Um nur 100% Höhe und Breite zu erreichen, müssen Sie sicherstellen, dass Sie den Standardrahmen der iFrames entfernt haben.

Probieren Sie es aus, indem Sie in meinem Beispiel einen größeren Rahmen (wie 3px) zum iframe hinzufügen, Sie sollten leicht sehen können, wie sich das auf das Layout auswirkt.

Quelle

2011-09-30 18:55:01 sg3s

@JustinSatyr aktualisiert meine Antwort;) – sg3s

-1

können Sie versuchen, diese zu nutzen:

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px'; 
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';

Quelle

2014-11-27 14:24:04 Prachi

IFRAME und widersprüchliche absolute Positionen

Antwort

Verwandte Themen