CSS Mindest Höhe für 2 divs

Osiris1

Lt. Junior Grade
Registriert
Feb. 2008
Beiträge
351
Ich arbeite mit Joomla und der Aufbau sieht ca so aus:

parent{
- menu {} (59px hoch)
- header{} (200px hoch)
- content{}
}
footer{} (59px hoch)

Ohne weitere Modifikationen schwebt der footer bei zu wenig content in der Luft. Deswegen will ich das parent und content div mit einer mindesthöhe ausstatten, damit bei zu wenig content der footer trotzdem ohne Spalt ganz am Ende ist. Bei noch mehr Content darf der footer durchaus auch erst nach scrollen sichtbar sein.

parent:
min-height: calc(100% - 59px);

Jetzt wird der content div (mit anderem Hintergrund) aber nicht automatisch auf heigth 100% aufgeblasen und ich habe den Spalt einfach nur verschoben. deswegen:

content:
position: absolute (mit relative kann ich % nicht verwenden)
min-height: calc(100% - 59px - 200px -59px);

Jetzt sieht bei wenig content alles schön aus. Wenn aber Content länger wird habe ich das Problem, dass der Content hinter dem footer vorbei geht und der footer nicht ans Ende wandert. Das liegt daran, dass absolut positionnierte divs keinen einfluss mehr auf die parent größe haben.

Theoretisch könnte ich das parent div mit javascript dynamisch vergrößern, damit es das content div umschließt. Aber das will ich nicht weil:
1. JavaScript...
2. Ich verwende Joomla und will nicht zu sehr in das Framework eingreifen.
(Genauso gut könnte ich den footer absolut positionieren und mit javascript an den content hängen. Selbes Problem...)

Gibts irgendeine andere Möglichkeit mein Ziel zu erreichen? Ich müsste einfach nur das content div vergrößern ohne "position: absolute" zu verwenden...

lg

PS: Ich hoffe ich habe mein Problem gut beschrieben. Wenn nicht: Bitte einfach nachfragen.
 
so ganz habe ich es nicht verstanden, wäre schön wenn du mal ein screenshot von dem fehler machen kannst.

Also dein Problem ist es, dass sich der Footer nicht an der richtigen stelle befindet und manchmal im hintergrund ist ?
 
Zuletzt bearbeitet:
Hm... Screenshot geht leider nur stark zensiert. Wird aber reichen müssen.
Nein Das Problem ist, dass der Footer dann fix an die min-height des parent angehängt wird. Die Höhe des Parent skaliert aber nicht mehr wenn der Content größer wird. Bei viel content reicht also das content div über das parent div hinaus. Damit schwebt der footer zwar beim Laden am Ende der Seite, aber der Content geht dahinter weiter.

vor dem scrollen: del
nach dem scrollen: del
Ergänzung ()

okay: Ich glaube ich habs geschafft

parent:
display: flex;
flex-direction: column;

content:
flex: 1;

Ich traue dem zwar noch nicht ganz. Aber es scheint zu funktionieren. Eigentlich hatte ich es mit flex eh schon versucht, aber ohne der flex-direction hat es mit das gesamte Design zerstört. Egal. Trotzdem danke für die Antwort!
 
Zuletzt bearbeitet:
Zurück
Oben