iFrame positionieren mit CSS

[der-curry]

Bin jetzt langsam am verzweifeln. Versuche schon seit Stunden den iFrame an die richtige Stelle zu bekommen.

Dieser soll direkt unter das Nav-Element, 8Px vom rechten und linken Rand und 25Px vom unteren entfernt sein. Sich also mit dem Browserfenster vergrößern und verkleinern. Ist das überhaupt ohne Javascript möglich?

Bei height:100%; und width:100%; schießt er über das Parent hinaus...

Bitte helft mir.

 

[Arcsinh]

Wenn ich dein Vorhaben richtig verstanden habe: lass mal beim iFrame position, right und left weg und definier stattdessen dein width und height 100%.

 

[der-curry]

Dann entstehen 2 ungewollte Scrollbalken, da die Höhe dann 100% + 66Px + 25Px und die Breite 100% + 2x 8Px beträgt.
Ich müsste die Ränder und das Nav von der Größe (100%) abziehen, aber soweit ich weis ist das nicht so einfach möglich...

Hättest du noch eine Idee für mich?

Danke.

 

[Space Vampire]

Warum willst du das überhaupt mit einem Iframe lösen?
Geht es um lokale Inhalte oder Fremdinhalte von anderen Domains.
Wenn es, wie ich vermute, um lokale Inhalte deiner eigenen Domain geht, gibt es da elegantere Lösungen als einen Iframe.

 

[der-curry]

Das ganze soll eine kleine php-Anwendung werden, also lokal auf dem Server. Ich wollte weitest gehend auf Javascript verzichten, damit es auf den meisten Browsern läuft.

Was gibt es denn da noch für Möglichkeiten?

Selbst wenn ich die Inhalte direkt einbinde, müsste ich sie ja mittig bekommen... Bietet css da überhaupt eine Möglichkeit?

 

[Space Vampire]

Du könntest die Inhalte direkt in ein Blockelement includen.
Aber das würde ehrlich gestanden auch dein Problem mit der variablen Höhe bei veränderlichem Viewport nach Seitenaufbau nicht lösen.

Aber vielleicht hilft dir das hier weiter:
CSS Div height: 100% | CSS Tutorials

die gewünschten abstände könntest du durch Margin oder Padding auf die Parents html und body erreichen.
Angehängte Dateien wird sich hier niemand herunterladen.
Um da expliziter zu werden, kannst du vielleicht mal ein Live-Beispiel online stellen.

 

[der-curry]

Besten Dank, habs geschafft. :)

Der iFrame befindet sich nun in einem div das ich wie folgt fixiert habe:

position:fixed; 
top:66px;
left:8px;
bottom:25px; 
right:8px; 
overflow:hidden;

Trotz erfolgreicher Validierung stellt der IE es nicht richtig dar, aber das ist mir gerade egal^^

 

[Arcsinh]

Trotz erfolgreicher Validierung stellt der IE es nicht richtig dar, aber das ist mir gerade egal^^

Solange es in einem Browser funktioniert...

 

[threadi]

Welcher IE? Viele IEs haben Probleme mit fixierter Positionierung, aber es gibt Hacks dafür nach denen man suchen kann.