Ganzseitige <iframe>

97

Ich habe den folgenden Beispielcode. Dies funktioniert mit allen Browsern außer Browsern auf Mobilgeräten.

Das Überlauf-Tag ist das Problem.

Funktioniert mit allen außer für Mobilgeräte:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Funktioniert mit allen Mobilgeräten und nicht mit Computern:

margin: 0; padding: 0; height: 100%;

Was ist der beste Weg, um es bei beiden zum Laufen zu bringen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>
html css iframe Lacer
quelle
Warum nicht einfach umleiten cnn.com?
GolezTrol
cnn.com ist eher ein Beispiel. um das Verhalten zu zeigen, das ich zu verhindern versuche.
Lacer
Fügen Sie einfach <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> den Kopf des enthaltenen HTML hinzu und die Reaktionsfähigkeit ist wieder da (zumindest teilweise).
Nukey

Antworten:

169

Hier ist der Arbeitscode. Funktioniert in Desktop- und mobilen Browsern. ich hoffe es hilft. Vielen Dank für alle Antworten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>
Lacer
quelle
2
Achtung, als ich oben einen Iframe platzieren wollte - es gab ein Problem in Chrome. Ich habe Closing </ iframe> hinzugefügt und arbeitet
Michal - wereda-net
Es scheint, als würde dadurch die Reaktionsfähigkeit (dh das Reduzieren von Spalten usw.) aus dem Inhalt des Iframes entfernt. Aber irgendwie nur beim Öffnen der Seite mit Mobile Safari, nicht beim Ändern der Größe eines Desktop-Browsers. Irgendwelche Ideen, was dieses Verhalten verursachen könnte?
Psteinweber
3
@psteinweber, müssen Sie nur <meta content='width=device-width, initial-scale=1.0' name='viewport'>zur enthaltenen Seite hinzufügen .
17.
Musste vwanstelle von %for widthund height Eigenschaften verwenden, um eine korrekte Ausrichtung in Chromium 81 zu erhalten. Andernfalls funktioniert es wie ein Zauber.
Josh Habdas
18

Dies ist browserübergreifend und vollständig ansprechbar:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>
Tawsif Torabi
quelle
7

Fügen Sie dies in Ihr CSS ein.

iframe {
  width: 100%;
  height: 100vh;
}
Shoriwa-Shaun-Benjamin
quelle
funktioniert gut :-) Danke Kumpel
Asad Ali
3

Das habe ich in der Vergangenheit benutzt. 

html, body {
  height: 100%;
  overflow: auto;
}

Auch in der iframefügen Sie den folgenden Stil

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Jay Patel
quelle
Vielen Dank für die Antwort, aber es ist im Wesentlichen das, was ich habe, so dass es nicht funktioniert. Im mobilen Browser werden Überlaufvorgänge abgeschnitten, und Sie können nicht scrollen.
Lacer
@Lacer Versuchen Sie, overflow: hiddendurchoverflow: auto
Jay Patel
habe das versucht. im mobilen Browser wird es immer noch abgeschnitten und im Desktop-Browser werden doppelte Schriftrollen verursacht
Lacer
Nein, immer noch die doppelte Schriftrolle im Desktop-Browser und schneidet auf mobilen Browsern ab
Lacer
2

Für Vollbild-Frame-Weiterleitungen und ähnliche Dinge habe ich zwei Methoden. Beide funktionieren gut auf Mobilgeräten und auf dem Desktop.

Beachten Sie, dass dies vollständige browserübergreifende, gültige HTML-Dateien sind. Einfach ändern titleund srcfür Ihre Bedürfnisse.
Sie können das Löschen in Betracht ziehen, <meta charset>wenn Sie keine Nicht-ASCII-Zeichen haben.

1. das ist mein Favorit:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

oder 2. so etwas , etwas kürzer:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>


Hinweis :
Um konservativ zu sein, sollten Sie die obigen Beispiele nicht verwenden, height:100vhda alte Browser dies nicht wissen (möglicherweise heutzutage nicht mehr) und height:100vhnicht immer mit height:100%mobilen Browsern übereinstimmen (hier wahrscheinlich nicht anwendbar). Ansonsten vhvereinfacht sich die Sache ein wenig, also

3. Dies ist ein Beispiel mit vh (nicht mein Favorit, weniger kompatibel mit wenig Vorteil)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>
jj
quelle