Axel Richter: iframe vertikal in die Mitte und das nicht unbeweglich

Beitrag lesen

SELF-Forum

iframe vertikal in die Mitte und das nicht unbeweglich

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

Per Javascript will ich ein inframe vertikal zentriert auf die Seite bekommen. Das klappt ja mit der Zeile:

parent.document.getElementById('Datenbereich').style.top=(parent.document.body.offsetHeight/2)-(document.body.scrollHeight/2)

Doch so bleibt das iframe dann ja fest stehen. Und auch wenn ich nur die Angabe 50% mache sitzt es fest.

Wie aber hät ich denn die Möglichkeit das bei Änderung der Seitengröße sich dem das iframe anpasst?

Dafür ist CSS besser geeignet als JavaScript.

Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Beschreibung der Seite</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
div#festerInhalt {  
 width:190px;  
}  
iframe {  
 height:300px;  
 width:500px;  
 position:absolute;  
 top:50%;  
 margin-top:-150px;  
 left: 210px;  
}  
</style>  
</head>  
<body>  
<div id="festerInhalt">  
<h1>Überschrift</h1>  
<ul>  
 <li>Navigationspunkt 1</li>  
 <li>Navigationspunkt 2</li>  
 <li>Navigationspunkt 3</li>  
</ul>  
<p>Textabsatz</p>  
</div>  
<iframe src="cssPositionFixed.html"></iframe>  
</body>  
</html>

Der Trick ist, dass der IFrame mit seiner Oberkante in der Mitte des ViewPorts positioniert ist (position:absolute; top:50%) und dann aber per (margin-top:-150px) um die Hälfte seiner Höhe wieder nach oben gerückt wird. Da bei jeder Seitengrößenänderung neu gerendert wird und damit das CSS neu wirkt, wird das dynamisch.

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln