Divs untereinander

[Smart]

Hallo Forum,

ich aheb ein Problem, das ich bis heute nicht ganz lösen konnte. Ich habe drei div-Elemente, die untereinander positioneiret werden müssen mit folgenden voruassetzungen:

1. Das erste div-element muss "fix" positioniert sein.
2. Das zweite div-element darunter muss eine 100% height haben.
3. Das dritte div-element muss eine fixe höhe haben.

Das problem ist nun folgendes:

1. Das zweite (mittlere) div-element verschiebt sich so unter das erste div-Element. Das zweite div-element soll unmittelbar unter dem erste div-Element anfangen.
2. die "height:100%;" von dem mittleren div-element verschiebt das dritte div-element außerhalb des Sichtbereichs und man bekommt einen Scrollbalken.

<style>

#div-container1 {
   position:fixed;
   top:0;
   background-color:red;
   width:100%;
   height:150px;
}

#div-container2 {
   background-color:yellow;
   width:100%;
   height:100%;
}

#div-container3 {
   background-color:blue;
   width:100%;
   height:100%;
}
</style>

<div>
    <div id="div-container1"></div>
    <div id="div-container2"></div>
    <div id="div-container3"></div>				
</div>

Wie kann man dieses Vorhaben erreichen?

Danke im Voraus.

[Tabellenkalk]

Hallo,

1. Das erste div-element muss "fix" positioniert sein.
2. Das zweite div-element darunter muss eine 100% height haben. Das zweite div-element soll unmittelbar unter dem erste div-Element anfangen.

man bekommt einen Scrollbalken.

Wie soll das ohne Scrollbalken gehen?

Gruß Kalk

[Smart]

Hi,

naja, 100% ist die der gesamte Bildschirm. Ich habe gedacht, dies wie eine Tabelle anzuordnen. Wie kann man sonst die drei Divs untereinander so zu platzieren, dass diese die gesamete höhe des Bildschirms füllen? Ist das machbar?

Gruß

[MrMurphy]

Hallo

Ich habe gedacht, dies wie eine Tabelle anzuordnen

Tabellenlayout, auch mit anderen Mitteln (also nachgebaute Tabellen, sehr häufig mit position:absolute) hat mit aktuellem HTML / CSS nichts zu tun. Das sollte man sich gar nicht erst angewöhnen.

Spätestens bei kleinem Fenster / Tablet / Smartphone fliegt einem so ein Layout in der Regel um die Ohren. Das ist schlicht Benutzerunfreundlich und zeigt Anfängerseiten.

Für große Fenster kann man fixed Header und fixed Footer verwenden, wobei der Footer sich bei viel Text nach unten verschieben sollte. Wobei du Schwierigkeiten haben wirst bei erfolgreichen Seiten fixed Header zu finden. Sowas braucht halt in der Realität kein Mensch.

Bei kleineren Fenstern sollte es dann gar keine fixen Elemente mehr geben, dadurch wird die Bedienung nur erschwert.

Gruss

MrMurphy

[Smart]

Hi,

vielen Dank für deine Antwort. Du hast an andieser Stelle vollkommen Recht. Aber bei einem fixen Header hat man den Vorteil, habe ich gedacht, dass man mindestens die häufig benutzten elemente immer im Blick hat und so braucht man nicht andauernd zu scrollen. Wenn ich nun auch noch einen fixen Footer definieren würde, würden die Leute mit kleineren Bildschirmen enorme Schwierigkeieten haben, weil die mittlere Bereich dann zu klein sein wird.

Wie kann man, wie du es vorgeschlagen hast, so ein Effekt erzielen, bei dem der footer nach unten verschwindet.

Gruß

[Linuchs]

Wie kann man dieses Vorhaben erreichen?

Gar nicht. Es ist unmöglich, 200% (= container2 + container3) auf dem Platz von 100% darzustellen.

Linuchs