CSS DIV Container untereinander setzen trotz Position: fixed?

[xuardas]

Hallo zusammen,

es geht um CSS und hier speziell Container. Ich habe drei Container:

1. #Top (Leiste mit Links)
2. #Inhalt (Texte, Bilder)
3. #Bottom (Link Impressum, Copyright)

Alle Container haben eine Breite von 100%. Div 1. hat zusätzlich einen Auto-Höhe und eine feste Position.
DIV 2. soll den Textinhalt darstellen und quasi unterhalb von Div 1. beginnen. Div 1. und 3. Sollen somit gerade bei den Smartphones immer sichtbar sein und nur Div 2. Scrollbar. Wie bekomme ich das hin, denn durch position:fixed bei 1 und 3 muss ich 2 bisher mit einem margin:top versehen, was ich aber nicht möchte, denn Div 1 (Top) soll noch immer die Auto-Höhe behalten.

Hat jemand von Euch eine Lösung hierzu? Vielleicht bin ich auch auf dem Holzweg und das lässt sich ganz einfach lösen.

Danke und Gruss
Xuardas

 

[benneq]

Pack die 3 divs ohne position:fixed auf den Bildschirm untereinander, das div mit dem Inhalt bekommt ein overflow:scroll und natürlich eine feste Größe.
Gut möglich, dass man die Höhe der Divs mit JavaScript errechnen muss, aber prinzipiell sollte es funktionieren.

Evtl. lässt sich auch mit calc() was reißen: http://www.w3.org/TR/css3-values/#calc-notation

 

[Daaron]

In reinem CSS wirst du das nicht lösen können. Verwend einfach JS, durch das du den Header erst dann mit fixed oben anpinnst, wenn etwas gescrollt wurde.

 

[Jesterfox]

In reinem CSS wirst du das nicht lösen können.

Auch nicht mit einem Tabellen-Layout? (nicht zu verwechseln mit Layout-Tabellen ;-)

Ich weiß nicht so genau wie sich die Unterstützung dafür bei den Browsern entwickelt hat, aber es war doch mal angedacht das man mittels display:table-row das verhalten von Tabellen für andere Elemente aktivieren kann. Damit sollte das doch gehen? html,body auf height 100% und body auf display:table, den DIVs Display:table-row und dem letzten seine Höhe geben, mittleres auf overflow:scroll (ungetestet)

 

[Chrissraud]

Man könnte es denke ich auch per Flexbox lösen. Mangels eigener Erfahrung bin ich mir aber nicht 100pro sicher.

 

[xuardas]

Danke Euch! Ich google auch schon die ganze Zeit und bin nicht so richtig voran gekommen. Flexbox sieht ganz gut aus, damit könnte ich mich nochmal beschäftigen.

Grüße
Xuardas

 

[Daaron]

Flex könnte tatsächlich gehen, wenn man es mit der Overflow:Scroll - Methode kombiniert.
Flex-"Container" ist 100% des Bildschirms hoch. Header & Footer haben Auto-Höhe, die "Mitte" nimmt sich den Rest und nutzt dann den (inneren) Scrollbar.

Praktisch ist das aber alles nicht. Sticky Header sind toll, aber nur, wenn sie extrem schlank sind und gerade auf Smartphones quasi keinen Raum einnehmen. Sticky Footer hingegen? Da fehlt mir der praktische Nutzen. Das frisst doch nur unnütz wertvollen Screen-Platz.

 

[falauss]

Spricht etwas dagegen Bootstrap zu nutzen?
Klingt eigentlich perfekt für deine Anforderung.

 

[xuardas]

Guten Morgen,

danke Euch für die Anregungen– sind gute dabei. Ich bin mir nicht sicher, denn eigentlich hat Daaron recht, denn wenige benutzen ein Galay Note, Nokia 1520 etc. etc. und haben somit meist kleinere Bildschirme zur Verfügung und ruck zuck wäre dann zu wenig Platz auf dem Bildschirm. Ggf. mach ich das doch über responsive design (bootstrap) wie von falauss vorgeschlagen. Muss mich da nur mal wieder einlesen, habe ich erst einmal mit einem Tutorial gemacht. Auch die Flex Variante werde ich einmal ausprobieren, einfach weil es mich interessiert.

Grüße
Xuardas