Für iframes: height & width 100%

von **Jellybabe** am 05.01.2012, 16:34

Hallo ihr Lieben,

ich komme gerade nicht weiter..

& zwar will ich für die PDF's, die rechts angezeigt werden, eine Höhe & eine Breite von 100%, sodass es sich automatisch an die Größe der Seite anpasst. Also soll nur noch am PDF direkt gescrollt werden & nicht mehr an der Seite selbst.

Leider bekomme ich entweder nur die Höhe auf 100% (mit position: absolute) oder, so wie jetzt, nur die Breite, aber nie beides zusammen.
Ok, meine Erklärung ist nicht die Beste, aber ich lasse die Seite mal für sich sprechen

Hier die Zip-Datei: http://dl.dropbox.com/u/42418489/stadrecht%20grau.zip

Solltet ihr eine Lösung mit jQuery finden, dann bitte etwas genauer, weil ich in dem Bereich noch nicht so fit bin.
Schon mal vielen Dank.

LG Jessi

von **paddelx3** am 20.01.2012, 21:18

Wenn ich dein Problem richtig verstanden habe, willst du ein Fenster erzeugen das die PDF lädt und in diesen Fenster soll man scrollen können, richtig? ô_o

Wenn ja dann musst du mal deine CSS Datei genauer angucken

Code: Alles auswählen: iframe { width: 100%; height: auto; height: 700px; bottom: 0; overflow: hidden; margin-left: 35px; padding-top: 112px; padding-left: 0px; }

Ich weis net, ob es das ist was du wolltest, aber das ganze sieht im Endefekkt mit Folgenden Code wie folgt aus.

Code: Alles auswählen: iframe { width: 70%; height: auto; height: 700px; bottom: 0; overflow: hidden; margin-left: 35px; padding-top: 112px; padding-left: 0px; position:fixed; }

von **Guillermo** am 21.01.2012, 01:03

Hi Jellybabe,

ich hab dir mal ein ganz einfaches Beispiel konstruiert bei dem
1. Das iFrame die volle Höhe und Breite ausfüllt
2. In dem iFrame gescrollt wird
3. Auf der eigentlichen Seite selbst nicht gescrollt wird

Code: Alles auswählen: <html> <head> <title>iFrame Test</title> <style type="text/css"> body { padding:0px; margin:0px; height:100%; width:100%; overflow:hidden; } #iframe { width:100%; height:100%; } </style> <body> <iframe id="iframe" src="loremipsum.html"></iframe> </body> </head>

Entscheidend ist hierbei das Attribut "overflow" mit dem Wert "hidden" beim Bodytag. Das bewirkt dass in dem Body - egal welche Inhalte es hat - keine Scrollbars angezeigt werden. Du musst selbst sozusagen nur noch für die richtige Höhe und Positions des iFrames sorgen (eben mit width, height, margin und position:absolute, falls eine absolute Positionierung gewünscht ist).

Viele Grüße,
Guillermo

Für iframes: height & width 100%

Für iframes: height & width 100%

Re: Für iframes: height & width 100%

Re: Für iframes: height & width 100%

Wer ist online?