"Vollbild" <iframe>

163

Wenn ich den folgenden Code verwende, um einen Iframe zu erstellen:

<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

Der Iframe geht nicht vollständig - ein 10 Pixel großer weißer "Rand" umgibt den Iframe. Wie könnte ich das lösen?

Hier ist ein Bild des Problems:

Screenshot der Seite

html iframe Trufa
quelle

Antworten:

103

Das bodyhat in den meisten Browsern einen Standardrand. Versuchen:

body {
    margin: 0;
}

auf der Seite mit dem iframe.

kevingessner
quelle
300

Um das gesamte Ansichtsfenster abzudecken, können Sie Folgendes verwenden:

<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>

Stellen Sie außerdem sicher, dass die Ränder der gerahmten Seite auf 0 gesetzt sind, z body { margin: 0; }. - Eigentlich ist das bei dieser Lösung nicht nötig.

Ich verwende dies erfolgreich, mit einem zusätzlichen display:noneund JS, um es anzuzeigen, wenn der Benutzer auf das entsprechende Steuerelement klickt.

Hinweis: Um den Ansichtsbereich des übergeordneten Elements anstelle des gesamten Ansichtsfensters zu füllen, wechseln Sie position:fixedzu position:absolute.

Lawrence Dol
quelle
31
Diese Antwort löst, wie Iframe den gesamten Bildschirm einnehmen kann
Mark Ma
Sie können auch prozentuale Längen des Ansichtsfensters verwenden .
Josh Crozier
2
akzeptierte Antwort hat bei mir nicht funktioniert. das tat es. Vielen Dank.
AlexVPerl
2
Gute Antwort! Einfach, browserübergreifend und endgültig.
Blankip
Funktioniert perfekt mit HTML 5
break7533
39

Sie können auch die prozentualen Längen des Ansichtsfensters verwenden , um dies zu erreichen:

5.1.2. Prozentuale Länge des Ansichtsfensters: die Einheiten 'vw', 'vh', 'vmin', 'vmax'

Die prozentualen Längen des Ansichtsfensters beziehen sich auf die Größe des anfänglichen enthaltenden Blocks. Wenn die Höhe oder Breite des anfänglich enthaltenen Blocks geändert wird, werden sie entsprechend skaliert.

Wobei 100vhdie Höhe des Ansichtsfensters und ebenfalls 100vwdie Breite darstellt.

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>
Erweitern Sie das Snippet

Dies wird in den meisten modernen Browsern unterstützt - Unterstützung finden Sie hier .

Josh Crozier
quelle
8

Verwenden Sie frameborder="0". Hier ist ein vollständiges Beispiel:

    <iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>
Hritik
quelle
7

Versuchen Sie, das folgende Attribut hinzuzufügen:

scrolling="no"
cmaxtech
quelle
5

Es ist unmöglich zu sagen, ohne ein lebendes Beispiel zu sehen, aber versuchen Sie, beide Körper zu geben margin: 0px

Pekka
quelle
@Trufa es könnte der Rand sein, aber es könnte auch etwas anderes sein. Verwenden Sie am besten Firebugs "Layout" -Ansicht, um dies herauszufinden
Pekka
2

Du könntest es versuchen frameborder=0.

Neuling
quelle
Danke, aber das ist "innerhalb des Iframes". Ich musste das Äußere modifizieren (das wusste ich erst, als @kevingessner antwortete). Danke !!
Trufa
2

Hinzufügen zu Ihrem Iframe hinzufügen, kann das Problem möglicherweise behoben werden:

frameborder="0"  seamless="seamless"
pentexnyx
quelle
1
@FABBRj Großartig, ich könnte helfen: D
pentexnyx
-2

Verwenden Sie stattdessen diesen Code:

    <frameset rows="100%,*">
        <frame src="-------------------------URL-------------------------------">
        <noframes>
            <body>
                Your browser does not support frames. To wiew this page please use supporting browsers.
            </body>
        </noframes>
    </frameset>
IşIk İşİtEn
quelle
7
Wird in HTML5 nicht mehr unterstützt
Hari Karam Singh