✔ Drei divs mit 100% Höhe untereinander

[Superdok]

Hi,
ist es mit css möglich drei divs mit 100% Höhe/Breite untereinander zu positionieren. Auch wenn man das Browserfenster verkleinert, sollen die divs entsprechend verkleinert bzw. vergrößert werden. In diesen Boxen ist jeweils ein anderes div, dass vertikal zentriert ist, horizontal allerdings einen festen Abstand hat. Ein div vertikal zentrieren ist jetzt nicht die Frage, sondern lediglich 3 div Boxen untereinander zu positionieren, die alle drei die gleiche Höhe haben und zwar die Höhe des Browserfensters. Man kann also am Ende praktisch 3 mal das Browserfenster nach unten scrollen.
Ich denke mit Javascript (Höhe auslesen und auf die divs anwenden) sollte das irgendwie möglich sein, owbohl ich kein Javascript kann, aber auch mit CSS oder überhaupt? Das Einzigste, was ich schaffe ist ein div mit 100% in jede Richtung

body {
	height:100%;
	margin:0;
	padding:0;
}
.container {
	position:absolute;
	width:100%;
	height:100%;	
}

<div class="container">Die Erste von drei Boxen</div>
<div class="container">Die Zweite</div> <!-- Diese will nicht unterhalb der Ersten -->

 

[Maik]

Hi,

setz es einfach ohne position:absolute um.

Ansonsten fehlt bei absoluter Positionierung den beiden nachfolgenden Blöcken die erforderliche Angabe zur top-Position, damit sie vom Browser nicht alle zu Beginn des Dokuments übereinenader gelegt werden:

html,body { 
	height:100%;
	margin:0;
	padding:0;
}
.container {
	position:absolute;  
	width:100%;
	height:100%;	
}
#box2 {
     top:100%;
}
#box3 {
     top:200%;
}

<div class="container">Die Erste von drei Boxen</div>
<div class="container" id="box2">Die Zweite</div>
<div class="container" id="box3">Die Dritte</div>

mfg Maik

 

[Superdok]

danke funktioniert soweit fast. Was noch störend ist, wenn man das Browserfenster zusammenschiebt, dann überlagern sich die Inhalte der einzelnen Boxen teilweise durch die prozentuale "top" Angabe schätze ich mal. Es gibt ja eine "min-height", die man beim container anwenden könnte, um die 100% Höhe auszugleichen. Gibt es etwas ähnliches auch bei "top" so dass es sich verhindern lassen kann, dass sich der Inhalt nicht überlagert?
Also man bestimmt bis zu welcher Pixelzahl sich die top:100% Eigenschaft auswirkt?

 

[Maik]

Es gibt ja eine "min-height", die man beim container anwenden könnte, um die 100% Höhe auszugleichen. Gibt es etwas ähnliches auch bei "top" so dass es sich verhindern lassen kann, dass sich der Inhalt nicht überlagert?
Also man bestimmt bis zu welcher Pixelzahl sich die top:100% Eigenschaft auswirkt?

Mir ist da nichts bekannt.

Wenn du, wie eingangs empfohlen, auf die absolute Positionierung verzichtest, dürfte sich dieses Problem von selbst in Luft auflösen.

mfg Maik

 

[Superdok]

Ah ich hatte den Vorschlag überlesen mit "postion: absolute". Ohne funktioniert es. Wenn ich nun allerdings meine vertikal zentrierten Boxen in jeweils diese 100% Boxen setzen will, dann funktioniert dies nicht. Die 100% Höhe der äußeren Box wird irgendwie kleiner als das Browserfenster und meine inneren Boxen sind nicht vertikal zenrtiert. Der CSS-Code der inneren Boxen ist

margin-top: -250px;		
	top: 50%;
	width: 850px;	
	height: 520px;

Also gemäß der Anleitung http://www.tutorials.de/forum/webma...kann-ich-ebenen-oder-elemente-zentrieren.html

Dadurch wird aber alles verschoben, also sowohl die äußeren, als auch die inneren, wahrscheinlich durch das negtive margin

 

[Maik]

Wie wäre es mit dieser Methode zum vertikalen Zentrieren?

http://www.pmob.co.uk/temp/vertical-align11.htm

mfg Maik

 

[Superdok]

Danke diese Methode hat funktioniert.