„Vollbild“ <iframe>

108

Wenn ich den folgenden Code verwenden, um ein iframe zu erstellen:„Vollbild“ <iframe>

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

Der iframe nicht den ganzen Weg-a 10px weiß „Grenze“ geht umgibt den iframe. Wie könnte ich das lösen? Hier

ist ein Bild des Problems:

Screenshot of site

Quelle

2010-10-20 Trufa

Die body hat eine Standardmarge in den meisten Browsern. Versuchen:

body { 
    margin: 0; 
}

auf der Seite mit dem iframe.

Quelle

2010-10-20 21:32:16 kevingessner

Perfekt !!! Lief wie am Schnürchen! vielen Dank!! – Trufa

Suche google nach 'reset css' –

hat nicht auf chrome – AlexVPerl

Unmöglich zu sagen, ohne ein anschauliches Beispiel zu sehen, aber versuchen, beiden Körper gibt margin: 0px

Quelle

2010-10-20 21:23:11

Bitte schauen Sie auf meine Bearbeitung, danke !! – Trufa

@Trufa könnte es der Rand sein, aber es könnte auch etwas anderes sein. Am besten benutze Firebugs "Layout" Ansicht, um herauszufinden, –

Vielen Dank Pekka! trotzdem @kevingessner hat es genagelt! – Trufa

Sie könnten frameborder=0 versuchen.

Quelle

2010-10-20 21:27:04 Newbie

Danke, aber das ist "innerhalb der iframe" Ich musste das Äußere ändern (ich wusste das nicht bis @kevingessner Antwort) danke !! – Trufa

Versuchen, das folgende Attribut:

scrolling="no"

Quelle

2012-05-16 13:21:33 cmaxtech

Verwendung 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>

Quelle

2012-07-22 09:56:10 Hritik

-2

Verwenden Sie diesen Code, anstatt es:

<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>

Quelle

2012-12-03 22:21:01

funktioniert nicht mehr in HTML5 –

187

Um das gesamte Ansichtsfenster abdecken, können Sie verwenden:

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

~~Und sicher sein, das eingestellt Rand der gerahmten Seite auf 0, z. B. body { margin: 0; }.~~ - Eigentlich ist das bei dieser Lösung nicht nötig.

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

Quelle

2013-02-06 20:59:27

+22

Diese Antwort löst, wie iframe den gesamten Bildschirm besetzen –

Sie können auch [viewport-prozentuale Längen] (http: // stackoverflow. com/a/27832759/2680216) .. –

akzeptierte Antwort funktionierte nicht für mich. Das hat es getan. Vielen Dank. – AlexVPerl

Sie können auch viewport-percentage lengths verwenden, um dies zu erreichen:

auf die Größe des anfänglichen

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

Ansichtsfenster prozentiger Längen sind umschließenden Blocks relativ. Wenn die Höhe oder Breite des ursprünglichen umschließenden Blocks geändert wird, werden sie entsprechend skaliert.

Wo 100vh die Höhe des Ansichtsfensters darstellt und ebenfalls 100vw die Breite.

Example Here

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>

Dies wird in den meisten modernen Browsern unterstützt - support can be found here.

Quelle

2015-01-08 04:07:11

Das ist hier Gold! –

„Vollbild“ <iframe>

Antwort

Verwandte Themen