it-swarm.com.de

Wie entferne ich die doppelte Bildlaufleiste, wenn Sie einen iframe verwenden?

Ich habe dieses Problem im Internet gesehen, und alle vorgeschlagenen Lösungen funktionieren für mich nicht. Ich dachte, ich würde hierher kommen.

Ich habe eine Seite mit einem iframe. Der obere Teil der Seite ist ein Dropdown-Menü, der Rest der Seite ist der Iframe. Wie ich sicher bin, ist die Idee, dass das Menü stationär bleibt und die Menüauswahl eine Anwendung im iframe ausführt. Der Inhalt des iframe sollte einen Bildlauf durchführen, die gesamte Seite jedoch nicht.

Ich habe versucht, den iframe width=height=100% auch mit width=height=100% in ein einziges Tabellenelement zu setzen, aber ich bekomme zwei Bildlaufleisten, wenn ich das Fenster vertikal zu kurz mache.

Irgendwelche Vorschläge?

Ich glaube, ich habe mich nicht gut erklärt. Ich möchte die Bildlaufleiste im iframe als auto behalten, aber ich möchte nie eine Bildlaufleiste für die gesamte Seite .. Ich brauche den iframe entsprechend groß, so dass er immer genau den Rest der Seite beansprucht Der Browser muss keine Bildlaufleiste erstellen, da der iframe niemals über den unteren Rand des Anzeigebereichs hinausragen sollte.

20
stu

AKTUALISIERTE:

DEMO:http://jsbin.com/ewomi3/3/edit

HTML

<table border=0 cellspacing=0 cellpadding=0 id="hold_my_iframe">
    <iframe src="http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow" width=100% height=100% marginwidth=0 marginheight=0 frameborder=0></iframe>
</table>

CSS

* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }  
#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

HINWEIS: Ich habe endlich verstanden, was Sie wollen! Verwenden Sie table-Tag anstelle eines div-Tags als Container! Sehen Sie sich die Demo an und genießen Sie es!

14
Luca Filosofi

setzen Sie den CSS-Überlauf auf den Bildrahmen, für den Sie die Bildlaufleisten löschen möchten, auf ...

overflow:hidden
10
Gabe

Ich weiß, das war ein bisschen alt, aber ich habe für meine Seite Folgendes getan:

Ich hatte eine Seite mit nur einem iFrame und wollte, dass die gesamte Seite verwendet wird, also habe ich verwendet 

<iframe style="height:100%;width:100%" src="..."></iframe>

Nachdem ich die entsprechende Polsterung/Rand-/Randentfernung hinzugefügt hatte, hatte ich das von Ihnen beschriebene Problem mit der doppelten Bildlaufleiste. Bei der Verwendung der Chrome-Funktion "Prüfen" entdeckte ich, dass der Hauptteil der Seite etwa 5 Pixel länger war als der iframe. Ich habe also nur den iframe-Code geändert:

<iframe style="height:100%;width:100%;margin-bottom:-5px;" src="..."></iframe>

Dieser margin-bottom:-5px; hat das Problem für mich behoben.

5
Liam Dawson

Für alle, die noch über dieses Problem mit der doppelten Bildlaufleiste verfügen, müssen Sie den iframe mit einem Element mit Überlauf umschließen: ausgeblendet und der HTML-Datei, dem Rumpf, dem iframe und dem Wrapper eine Höhe von 100% hinzufügen.

http://jsfiddle.net/KZ5wz/ (Ich weiß nicht, warum das Ergebnis in JsFiddle nicht richtig angezeigt wird, aber es funktioniert wie ein Zauber in meinem Rechner.)

3
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body> 
<iframe height="100%" width="100%" src="yourframe1.html"></iframe>
<iframe src="yourframe2.html" width="100%" height="100%"></iframe>
</body>
3
Fabio R Cardoso

Die Anforderungen sind klar:

  1. Es gibt eine Menüleiste über dem iframe, aufgrund derer der iframe anscheinend nicht vollständig zum unteren Rand der gerahmten Seite scrollen kann. 
  2. Die Bildlaufleiste des Fensters muss ausgeblendet sein, nicht jedoch die Bildlaufleiste des Iframes.

Meine Lösung ist sehr einfach: 

  1. Blenden Sie die Bildlaufleiste des Fensters mit overflow:hidden; aus.
  2. Geben Sie der iframe-Höhe nicht die üblichen 100% an, sondern 100% minus der Höhe des Menüs und/oder der Kopfzeile, die über dem iframe liegt. Ich gehe davon aus, dass das Menü/der Header 20% der Gesamthöhe ausmacht, aber da es normalerweise eine feste Höhe hat, kann man es vielleicht am besten in CSS3 als height: calc ( 100% - 120px ); berechnen. Der Wrapper um den iframe kann ein div oder eine Tabelle mit einer Breite von 100% und einer Höhe von 100% sein.

Hier ist mein Beispiel mit der iframe-Höhe, die auf 80% (des Fensters) eingestellt ist:

styling:

body {
    overflow: hidden;
}
#hold_my_iframe {
    padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}

html:

<table border="0" cellspacing="0" cellpadding="0" id="hold_my_iframe">
    <iframe src="http:/example.com/my-iframed-page.php"
            width="100%" height="80%"
            marginwidth="0" marginheight="0" frameborder="0"></iframe>
</table>
2
Ian Onvlee

Löschen Körper {Höhe: 100%; }

1
Irshad Khan

Da diese Frage irgendwie immer noch unbeantwortet bleibt, dachte ich, ich würde meine zehn Cent einwerfen. Ich habe mich gefragt, ob Sie mit den Einstellungen von display:block/display:inline herumgespielt haben. Ich verstehe Ihre Frage nicht ganz, ich bin nicht ganz sicher, wie Sie das tun würden, aber ich denke, Sie möchten vielleicht Ihre iframe in inline ändern.

0
Cosine

Nun, die Frage ist alt, aber ich hatte heute das gleiche Problem und keine der Antworten löste mein Problem. Bei internen Seiten (gleiche Domäne) wurden auch zwei vertikale Bildlaufleisten angezeigt. Eine, um durch die geladene Seite zu navigieren (richtig), und eine andere, um die Höhe der iframe-Zone ein wenig anzupassen (!) ... Bei externen Quellenseiten scheint es gut zu funktionieren.

Wie ich dieses Problem gelöst habe, war das Hinzufügen einer Klasse zum Hauptteil der internen Seite, um diese zu laden 

<body class="internalPage">

und füge folgendes in meine CSS-Datei ein 

body.internalPage{height: 99.5%;}

Ich hoffe es hilft in Zukunft jemandem.

0
ricardoc

Ich habe mein Problem mit der doppelten Bildlaufleiste gelöst, indem ich dynamisch die Höhe des Iframes zuweise.

StackOverflow - Dynamische Änderung der iframe-Höhe

0
Jennifer Zhao