Drei vertikal gestapelte DIVs mit scrollender Mitte

8

Ist es möglich, drei DIVs vertikal zu stapeln und nur das mittlere Div vertikal zu scrollen? Ich möchte jedoch keine Pixelhöhen verwenden, da sich die DIVs in einem Dialogfeld befinden, dessen Größe geändert werden kann. So etwas (entschuldige meine lausige ASCII-Kunst):

%Vor%

Das Ziel besteht darin, die Kopf- und Fußzeile zu fixieren, und wenn das Dialogfeld größer wird, würde das mittlere Teil vertikal wachsen. Vielleicht bin ich nur dumm, aber ich habe das in den letzten paar Stunden bekämpft und finde es nicht richtig. Die drei DIVs müssen wahrscheinlich innerhalb eines "anderen" DIVs sein, aber wenn ich das tue und die Höhe auf 100% setze, wächst sie, während der mittlere DIV wächst. Auch hier ist es wahrscheinlich etwas albernes, das ich nicht vertrete. Ich habe auch versucht, eine Tabelle ohne Erfolg zu verwenden.

Danke für jede Hilfe.

    
Dave 10.06.2010, 02:25
quelle

2 Antworten

8

Dies sollte funktionieren

%Vor%

Bearbeitet - Für Kopf- und Fußzeile mit fester Position im modalen Dialog

%Vor%     
John Hartsock 10.06.2010, 02:29
quelle
2

Noch einmal für 2017. Mit flexbox ist dies jetzt möglich, ohne dass die Höhe der Kopf- und Fußzeile explizit definiert werden muss. Dies funktioniert zumindest in allen Browsern, die derzeit einen signifikanten Marktanteil haben, mit Ausnahme von IE & lt; = 10, der immer noch einen Anteil von 1-5% hat, je nachdem, wen Sie fragen. Da dies in der Regel ein visueller / Usability-Mechanismus ist und die Funktionalität nicht blockiert, sollte die Verwendung von flexbox für diesen Fall Ihre Seite zumindest für Benutzer von nicht unterstützten Browsern nutzbar lassen.

Sie müssen lediglich Ihren Header, Inhalt und Fußzeile in ein div mit expliziter Höhe (z. B. body oder ein Kind davon mit 100% Höhe) und mit Stilen einbinden:

%Vor%

Und wenden Sie den Stil auf den Bildlaufbereich:

%Vor%

Wenn Sie möchten, dass der scrollbare Bereich vergrößert wird, sodass der gesamte vertikale Platz verwendet wird:

%Vor%

und in der Kopf- und Fußzeile (notwendig für Safari und IE 10):

%Vor%

Ссылка

    
Adam Leggett 14.03.2017 19:03
quelle

Tags und Links