3 Div, zwei davon fixed

[Jürgen Pickl]

Hallo! Ich bin leicht am verzweifeln... 😕

Ich habe auf einer Seite drei Div's. eins oben, eins in der Mitte und eins unten. Das obere und untere Div sind immer gleich hoch und breit, das mittlere variiert in der Höhe. Das obere und untere Div sollen zudem beim scrollen nicht mitscrollen. Das mittlere Div quasi "unten durch.

Ich hoffe auf Inspiration! Danke :)

[Gunnar Bittersmann]

@@Jürgen Pickl

Ich habe auf einer Seite drei Div's. eins oben, eins in der Mitte und eins unten.

Wieso div? Ich vermute, dass andere Elemente angebracht sind: header, main, footer, …

Das obere und untere Div sind immer gleich hoch und breit,

Wie breit denn? Was, wenn der Viewport (das Browserfenster) schmaler ist als diese Breite?

Wie hoch denn? Was, wenn der Inhalt mehr Platz braucht?

Feste Höhen/Breiten sind selten eine gute Idee.

Das obere und untere Div sollen zudem beim scrollen nicht mitscrollen. Das mittlere Div quasi "unten durch.

position: fixed mit Risiken und Nebenwirkungen; besser: Flexbox, siehe dortige Beispiele.

LLAP 🖖

[Jürgen Pickl]

Hallo Gunnar!

Ich habe vielleicht noch vergessen zu erwähnen: Der Inhalt des oberen und unteren Div sind IMMER gleich. ebenso wird die Anwendung für einen ganz speziellen Viewport geschrieben. Sogar die Modelle der Tablets sind immer gleich 😉

Aber der Hinweis auf die flex-Methode ist sehr sehr interessant! Danke dafür!

[Gunnar Bittersmann]

@@Jürgen Pickl

Ich habe vielleicht noch vergessen zu erwähnen: Der Inhalt des oberen und unteren Div sind IMMER gleich.

Schon wenn du [Ctrl][+] oder Äquivalent drückst, ist es mit „immer gleich“ vorbei.

ebenso wird die Anwendung für einen ganz speziellen Viewport geschrieben. Sogar die Modelle der Tablets sind immer gleich 😉

Tablet fällt runter, ist kaputt, neues muss her …

Aber der Hinweis auf die flex-Methode ist sehr sehr interessant! Danke dafür!

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’ ”
—John Allsopp, “A Dao of Web Design” (Hervorhebung von mir)

LLAP 🖖

[MrMurphy1]

Hallo

Ich hoffe auf Inspiration! Danke 😀

Ich habe mal eine ältere Beispielseite rausgekramt und stelle sie noch mal temporär bereit:

Beispielseite fixed header und footer

Vielleicht hilft dir das Beispiel ja weiter.

Gruss

MrMurphy

[Jürgen Pickl]

Genau das wars! DANKE!! :) :)

[MrMurphy1]

Hallo

Schön.

Ich habe den Inhalt meiner Testdatei mal durch eine Beschreibung ersetzt wie das ganze Konstrukt funktioniert und welche (wenigen) CSS-Angaben entscheidend sind.

Gruss

MrMurphy