Vollbild-iFrame mit einer Höhe von 100 %

Question 1

Wird iframe height=100% in allen Browsern unterstützt?

Ich verwende doctype als:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wenn ich in meinem Iframe-Code sage:

<iframe src="https://stackoverflow.com/questions/5867985/xyz.pdf" width="100%" height="100%" />

Ich meine, wird es tatsächlich die Höhe der verbleibenden Seite einnehmen (da sich oben ein weiterer Rahmen mit einer festen Höhe von 50 Pixel befindet). Wird dies in allen gängigen Browsern (IE/Firefox/Safari) unterstützt?

Auch in Bezug auf Bildlaufleisten, obwohl ich sage scrolling="no"ich kann deaktivierte Bildlaufleisten in Firefox sehen … Wie kann ich Bildlaufleisten vollständig ausblenden und die Iframe-Höhe automatisch einstellen?

Question 2

Sie könnten Frameset wie in der vorherigen Antwort angegeben verwenden, aber wenn Sie darauf bestehen, iFrames zu verwenden, sollten die beiden folgenden Beispiele funktionieren:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Eine Alternative:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Um das Scrollen mit 2 Alternativen wie oben gezeigt auszublenden:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack mit dem zweiten Beispiel:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Um die Bildlaufleisten des iFrame auszublenden, wird das übergeordnete Element erstellt overflow: hidden um Bildlaufleisten auszublenden, und der iFrame wird auf 150 % Breite und Höhe gebracht, was die Bildlaufleisten außerhalb der Seite zwingt, und da der Hauptteil keine Bildlaufleisten hat, kann man nicht erwarten, dass der Iframe die Grenzen der Seite überschreitet . Dadurch werden die Scrollbalken des iFrames mit voller Breite ausgeblendet!

Question 3

3 Ansätze zum Erstellen eines Vollbilds `iframe`:

Ansatz 1 – Viewport-Prozentlängen

Im unterstützte Browserkönnen Sie verwenden Viewport-Prozentlängen wie zum Beispiel height: 100vh.

Woher 100vh stellt die Höhe des Ansichtsfensters dar, und ebenso 100vw stellt die Breite dar.

Beispiel hier

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

<iframe></iframe>

Ansatz 2 – Feste Positionierung

Dieser Ansatz ist ziemlich geradlinig. Stellen Sie einfach die Positionierung des ein fixed Element und füge a hinzu height/width von 100%.

Beispiel hier
```
iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
```
```
<iframe></iframe>
```

Ansatz 3

Legen Sie für diese letzte Methode einfach die height des body/html/iframe Elemente zu 100%.

Beispiel hier

html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

<iframe></iframe>

Question 4

Ich bin auf das gleiche Problem gestoßen, ich habe einen iframe in ein div gezogen. Versuche dies:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

Die Höhe ist auf 100vh eingestellt, was für Viewport Height steht. Außerdem könnte die Breite auf 100vw eingestellt werden, obwohl Sie wahrscheinlich auf Probleme stoßen werden, wenn die Quelldatei reagiert (Ihr Rahmen wird sehr breit).

Question 5

1. Ändern Sie Ihren DOCTYPE in einen weniger strengen. Verwenden Sie kein XHTML; Es ist dumm. Verwenden Sie einfach den HTML 5-Doctype und gut ist:

<!doctype html>

2. Möglicherweise müssen Sie sicherstellen (abhängig vom Browser), dass das übergeordnete Element des Iframes eine Höhe hat. Und sein Elternteil. Und sein Elternteil. Etc:

html, body { height: 100%; }

Question 6

Das hat bei mir sehr gut funktioniert (nur wenn iframe-Content aus der gleiche Domäne):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="https://stackoverflow.com/questions/5867985/./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>

Question 7

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

<iframe></iframe>

Question 8

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

3 Ansätze zum Erstellen eines Vollbilds iframe:

Ansatz 1 – Viewport-Prozentlängen

Ansatz 2 – Feste Positionierung

Ansatz 3

3 Ansätze zum Erstellen eines Vollbilds `iframe`: